Different shapes of button in oracle ADF

Not long back, there was a craze to have 3D look & feel of  your websites but gradually people are again interested to see the flat UI of 2D.

Accordingly, oracle ADF was also having the 3D look & feel for its faces components with its in-built fusion skin. Fusion skin was created using probably with CSS 2.1 specification. And almost all the parts of faces component was implemented using images, and gradient to create 3D effect.

I guess, to meet the users expectation, oracle has come up with a latest skin called Skyros just couple of months ago and this is just CSS3 compliant specification. You can apply all the CSS3 features against each of pseudo-elements of the faces component.

But again, you don't have complex UI out-of-the-box from the Skyros skin, so you have to apply the CSS3 on pseudo-elements to achieve certain complex UI.

Here are the few sample buttons, I have created which are basically real in nature in the web application

There is no Jquery, no javascritp, only ADF faces and CSS3.

ADF faces component used is - <af:commandButton> and different CSS classes been created for different shapes.

1/ Next Button

<af:commandButton text="Next" id="cb1" styleClass="fancyArrowNext"/>

CSS -

.fancyArrowNext
{
        background :  rgb(115,115,115) !important;
height: 20px;
position: relative;
width: 100px;
        text-align: left;
         font: 10pt bold;
         color:white;
         border: thin solid rgb(99,99,99) ;
       

}

.fancyArrowNext:after
{
    content: ' ';
    height: 0px;
    width: 0px;
    border: 10px solid   rgb(82,82,82)    ;
    top: -1px;
    left: 85%;
    position: absolute;
    border-left-color: transparent ;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;

}

2/ Previous Button

<af:commandButton text="Previous" id="cb2"  styleClass="fancyArrowPrev"/>

CSS-
.fancyArrowPrev
{
        background :  rgb(115,115,115) !important;
height: 20px;
position: relative;
width: 100px;
        text-align: right;
         font: 10pt bold;
         color:white;
         border: thin solid rgb(99,99,99) ;
}
.fancyArrowPrev:after
{
    content: ' ';
    height: 0px;
    width: 0px;
    border: 10px solid   rgb(82,82,82)    ;
    top: -1px;
    left: 0px;
    position: absolute;
    border-right-color: transparent ;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;

}

3/Close Button

<af:commandButton text="X" id="cb3"  styleClass="fancyButtonClose"/>

CSS-

af|commandButton.fancyButtonClose
{
        background :  rgb(49,49,49) !important;
height: 40px;
position: relative;
width: 40px;
        text-align: right;
         font: 14pt bold Verdana, Arial, Helvetica, sans-serif ;
         color:white;
         border: thin solid  rgb(214,214,214)   ;
         border-radius:20px 20px 20px 20px;
        text-align: center;
}

af|commandButton.fancyButtonClose:hover
{
    background: rgb(255,99,99) ;
    border: thick solid rgb(255,181,181) ;
    color:  Red;
    font: 10pt bold Verdana, Arial, Helvetica, sans-serif ;
}

4/ OK Button

<af:commandButton text="ok" id="cb4" styleClass="fancyButtonOK"/>

CSS - 

af|commandButton.fancyButtonOK

{

        background :  rgb(181,181,181)  !important;

height: 20px;

position: relative;

width: 100px;

        text-align: right;

         font: 10pt bold Verdana, Arial, Helvetica, sans-serif ;

         color:white;

         border: thin solid  rgb(214,214,214)   ;

         border-radius:10px 10px 10px 10px;

        text-align: center;

}

5/ top to right button

  <af:commandButton text="top to right" id="cb5" styleClass="fancyDoubleArrowTop2Right"/>

CSS - 

.fancyDoubleArrowTop2Right

{

       

        background :  rgb(115,115,115) !important;

height: 20px;

position: relative;

width: 100px;

        text-align: left;

         font: 10pt bold;

         color:white;

         border: thin solid rgb(99,99,99) ;

         

}

.fancyDoubleArrowTop2Right:after

{

  

  content: ' ';

    height: 0px; 

    width: 0px; 

    border: 10px solid transparent ; 

    top: -1px; 

    left: 100%; 

    position: absolute; 

    border-left-color: rgb(115,115,115); 

}

.fancyDoubleArrowTop2Right:before

{

    

    content: ' ';

    height: 0px; 

    width: 0px; 

    border: 10px solid transparent ; 

    top: -20px; 

    left: 0px; 

    position: absolute; 

    border-bottom-color: rgb(115,115,115); 

}

These CSS classes can be applied to any faces components to create different spaces.

Good luck and cheers for your implementation.