• 0
Sign in to follow this  
Followers 0

Customize rollover color shortcode button


Question

Posted · Report post

Hi Pagelines,

 

I have a quick question... I want to change the color slightly of the shortcode "warning" button in my site. I've done this successfully using:

 

.btn-warning {
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fec400),to(#f79227));}
 
However, I don't see how to target the rollover state. Currently, the rollover shows the old color, which comes up 1/2 way and looks off: http://rad.mosaicearth.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-05-at-8.10.37-PM.png
 
Can you please advise on how to target here??
 
My site is on a staging server, but I can create a similar button on a live site if needed.
 
Thank you!!
 
 

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

Hi there, to target the hover simply add :hover behind the class.

 

.btn-warning:hover

 

If using firebug or chrome you can see the css for hover/active/focus classes by checking the option in the style tab.

 

Example in firebug - https://www.dropbox.com/s/78jdgwjebssp223/Screenshot%202014-02-06%2007.32.54.png

 

Example in chrome - http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome, thank you James. Very appreciated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0