function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
TBouscalTBouscal 

Change background of Apex:commandButton onmouseover

I've read a dozen or so questions and answers related to changing the color of a button in a VF page.  Most suggest using a style, some suggest using javascript.  Neither are working for me.  Are there other ways to change the color of an Apex:commandButton?

Javascript: 
<script>
        function setColor(btn,color){
        var count=1;
        var property = document.getElementById(btn);
        if (count == 0){
            property.style.backgroundColor = "#FFFFFF"
            count=1;
        }
        else {
            property.style.backgroundColor = "#000000"
            count=0;
        }
    }
    </script>



VF Page button: 
<apex:commandButton id='myButton'
                                    style="position:fixed;
                                           bottom:0px;
                                           right:0px;
                                           padding:5px 10px;
                                           color:#FFFFFF;
                                           border-color:#6C8049;
                                           background:#89B32B;
                                           font-weight:bold;
                                           font-size:13px;
                                           line-height:18px;"
                                    onmouseover="setColor('myButton','#A2CA45');"
                                    onmouseout="setColor('myButton','#89B32B');"
                                    value="Create" title="Create" action="{!createCase}" />

This is almost the last component of a project, I'd love to wrap it up soon.

 
Best Answer chosen by TBouscal
Kanika DuaKanika Dua
You can Try this

<apex:page>
      <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" />
           
         
        <apex:form >
 <script type="text/javascript">  
            function turnRed(id) {
                 alert("hi");
                 var myPara = document.getElementById(id);
                 alert(myPara);
                 myPara.style.background = "green";
            }
        </script>
        <apex:pageBlock >
  <apex:commandbutton    value="Go Google"  id="check" style="background:red"  onmouseover="turnRed('{!$Component.check}')"/>
         </apex:pageblock>
</apex:form> 
       
</apex:page>

All Answers

Kanika DuaKanika Dua
You can Try this

<apex:page>
      <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" />
           
         
        <apex:form >
 <script type="text/javascript">  
            function turnRed(id) {
                 alert("hi");
                 var myPara = document.getElementById(id);
                 alert(myPara);
                 myPara.style.background = "green";
            }
        </script>
        <apex:pageBlock >
  <apex:commandbutton    value="Go Google"  id="check" style="background:red"  onmouseover="turnRed('{!$Component.check}')"/>
         </apex:pageblock>
</apex:form> 
       
</apex:page>
This was selected as the best answer
TBouscalTBouscal
Thank you Kanika, that did the trick.