ADF commandLink/goLink(Links) Skinning

Now a days, Use interface plays a vital role in applications, whatever technology will be used, Nice user interface should be mandatory. In ADF, Sometimes the requirement like the look and feel of an application same like Html website, Having a header section with some of the links. These all are horizontally aligned with nice background colors.
In adf, we can easily achieve with links.

Expected UI:

The below is the layout in source page to achieve above look and feel.

Here, I have defined navTab styleclass for each individual link.

The below are the css for normal commandlink component i,e without having any hovers,foucus e,t,c.

af|commandLink.navTab {
    font-family: 'openSans-Regular';
    display: inline-block;
    padding: 15px 20px;
    background: #fff;
    cursor: pointer;
    color: #000;
    font-size: 13px;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

The below are the css for commandlink component having hovers,foucus e,t,c.

af|commandLink.navTab:hover,

 af|commandLink.navTab:active,

 af|commandLink.navTab:active:hover,

 af|commandLink.navTab:focus:hover,

 af|commandLink.navTab:focus:hover:active {

    font-family: 'openSans-Regular';

    display: inline-block;

    padding: 15px 20px;

    background: #565656;

    cursor: pointer;

    color: #fff;

    font-size: 13px;

    text-decoration: none;

    -webkit-transition: all 0.2s;

    -moz-transition: all 0.2s;

    -ms-transition: all 0.2s;

    -o-transition: all 0.2s;

    transition: all 0.2s;

}

Download: linksSkinningPoc

Reach me if you have any doubts.