Home>Support>Call to Action Button hover

Call to Action Button hover

By Chandran V, 10 years ago. Last reply by Magus, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi Andrew,

Could you show me how to change the color of the button during hover? Thanks.

URL: http://www.atcas.org.sg/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 4 hours ago Magus
    Hi, I Work Here

    Hi Chandran V

    Please add the following to Appearance->Custom CSS

    .so-widget-sow-button .ow-button-base a.ow-button-hover:hover {
  background: #ff8d0a !important;
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#d67200),color-stop(1,#ff8d0a)) !important;
  background: -ms-linear-gradient(bottom,#d67200,#ff8d0a)!important;
  background: -moz-linear-gradient(center bottom,#d67200 0%,#ff8d0a 100%)!important;
  background: -o-linear-gradient(#ff8d0a,#d67200)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8d0a', endColorstr='#d67200', GradientType=0)!important;
  border-color: #c76a00 #bd6500 #ad5c00 #bd6500!important;
  color: #ffffff!important;
}

    Please change the gradient or text colour to what you need. For more information on Gradients please see here

    http://css3buttongenerator.com/

    Let us know how you get on

    Magus

  2. 10 years, 4 hours ago Chandran V

    Hi Magus, thanks for the css. I changed the end color but I still don’t see any change.

  3. 10 years, 4 hours ago Magus
    Hi, I Work Here

    Hi Chandran V

    You would need to change the colour code in all lines relating to the gradient as there is an entry for each type of browser technology. Please try this

    .so-widget-sow-button .ow-button-base a.ow-button-hover:hover {
  background: #ff8d0a !important;
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#FF101F),color-stop(1,#ff8d0a)) !important;
  background: -ms-linear-gradient(bottom,#FF101F,#ff8d0a)!important;
  background: -moz-linear-gradient(center bottom,#FF101F 0%,#ff8d0a 100%)!important;
  background: -o-linear-gradient(#ff8d0a,#FF101F)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8d0a', endColorstr='#FF101F', GradientType=0)!important;
  border-color: #c76a00 #bd6500 #ad5c00 #bd6500!important;
  color: #ffffff!important;
}

    Magus

  4. 9 years, 11 months ago Chandran V

    Beautiful, Magus. Thank you very much for the clarification. Really appreciate all the support you folks are giving.

  5. 9 years, 11 months ago Magus
    Hi, I Work Here

    You are welcome.

    Let us know if you need anything else

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More