Jump to content


Photo
- - - - -

Customize rollover color shortcode button

shortcode button color customization rollover

Best Answer James B , 06 February 2014 - 07:34 AM

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....06 07.32.54.png

 

Example in chrome - http://stackoverflow...developer-tools

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 massmosaic

massmosaic

    Advanced Member

  • Members

  • 68 posts
  • Country: Country Flag

Posted 06 February 2014 - 01:16 AM

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.mosaicear...-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!!
 
 


#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 February 2014 - 07:34 AM   Best Answer

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....06 07.32.54.png

 

Example in chrome - http://stackoverflow...developer-tools



#3 massmosaic

massmosaic

    Advanced Member

  • Members

  • 68 posts
  • Country: Country Flag

Posted 08 February 2014 - 07:35 PM

Awesome, thank you James. Very appreciated.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17660 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 February 2014 - 11:15 AM

Thanks for informing us the issue has been resolved.







Also tagged with one or more of these keywords: shortcode button, color customization, rollover