Change Default look or CSS of ADF button

 Requirement-It is very common requirement in any adf application to change the default color of adf button,adf button text color as per client requirement of UI design.

when we use af:commandButton in 11g or af:button component in 12c it comes with default look as below.

Now requirement is to change the default look to something else as per your project standards so that we dont have to apply inline style each time we use adf button in application.

In my case I converted it to green background color with text color white.

Add below snippet of css in you ADF application css file and run the application again to see new look and feel of default button.

Code Snippet in CSS

.af_commandButton.p_AFTextOnly,

.af_commandButton, button.af_commandButton,button,button:focus,.af_commandButton:focus,.af_commandButton:active:hover,.af_commandButton:focus:hover.af_commandButton:focus:active,.af_commandButton:active:focus{

  background: #40A828 !important;

  text-decoration: none ;

  color:#ffffff !important;

  padding:3px 10px 3px 10px !important;

  border:none  !important;

  border-style: none !important;

  outline:none !important;

  cursor: pointer;

}

New button look will be something like below.Now just just af:commandbutton component anywhere in application and button color will be as below.

you can also have two three types of button css in you application but for that different style class need to be created.