+ Start a Discussion
JaanuJaanu 

How to change the color of the standard button in VF page?

I have VF page. I am using this VF page in lightining component in iFrame. VF page is using the standard controller "Account". The page has buttons. I want to change the color of the button - background and button color as well. The buttons I have are "Save" and "Cancel" both of them are standard buttons. Pls let me know.... thanks. 
Best Answer chosen by Jaanu
Raj VakatiRaj Vakati
you can do it by using the css class selector
<style>
.contentStyle { font-size:12px; }
.buttonStyle { width:100%; background-color:green; text-align:center; padding-top:4px; }
.activeTab {background-color: #B7A752; color:white; background-image:none}
.inactiveTab { background-color: #F3F3EC; color:black; background-image:none}
.NoRecord { font-size:11px;}
</style>

 <apex:form> <apex:commandButton action="{!save}" value="Edit" styleClass="buttonStyle "></apex:commandButton>

 </apex:form>
Or
 
.yourbuttonClass{ width:100% !important;
background-color:green !important;
 text-align:center; padding-top:4px !important;
 }


 


 

All Answers

Raj VakatiRaj Vakati
you can do it by using the css class selector
<style>
.contentStyle { font-size:12px; }
.buttonStyle { width:100%; background-color:green; text-align:center; padding-top:4px; }
.activeTab {background-color: #B7A752; color:white; background-image:none}
.inactiveTab { background-color: #F3F3EC; color:black; background-image:none}
.NoRecord { font-size:11px;}
</style>

 <apex:form> <apex:commandButton action="{!save}" value="Edit" styleClass="buttonStyle "></apex:commandButton>

 </apex:form>
Or
 
.yourbuttonClass{ width:100% !important;
background-color:green !important;
 text-align:center; padding-top:4px !important;
 }


 


 
This was selected as the best answer
JaanuJaanu
Thanks Raj...