Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Hello all
this post is about styling af:button component in ADF 12.1.3
how can we customize a button , change it's color, background color, shape ,size, font and many more
In 12.1.3 Jdeveloper, some features are supported like width of button directly from inline style property (this was not supported in 11g)

you can see new features for client side css- http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html

So let's start
I hope everyone know how to create css (skin) file in jdeveloper , if don't then follow this

Right click on viewController project → New from Gallery → Categories → Web Tier → JSF/Facelets → ADF Skin



Dropped 3 buttons on page, third one is disabled

Changing button properties (width, font, color for different client event) -

I think no description needed as tags are self-descriptive

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
}

Output-

Now change background color - to do this we have to use af|button::link  selector

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
}

Output-

In same way we can change button behavior for hover, disabled and depressed client event

Hover event-

af|button:hover::link {
    background-color: #c7660b;
    border: skyblue 2.0px solid;
    color: White;
}

af|button:disabled::link {
      background-color: Gray;
    border: skyblue 2.0px solid;
    color: White;
}

Output- (hover on first button)

Depressed event- (Select )
 

af|button:depressed::link {
    background-color: maroon;
    border: skyblue 2.0px solid;
    color: White;
}

Changing shape of button-

1.Rounded corner (oval shape)
just change af|button and af|button::link selectors

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Output-

2.Square Button-

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
}

Output-

2.Round(Circle) Button-

changing shape is nothing just some hit and try in css, see the changes css other selectors remain same

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

Output-

So purpose of this post is to give overview of skinning and different selectors, you can try it on any component. Jdeveloper provide built in skin editor for all component , there you can see all selector and pseudo element of a component
Thanks , Happy Learning