Title: Change Button Colors
Last modified: August 21, 2016

---

# Change Button Colors

 *  [cari.h.cayton](https://wordpress.org/support/users/carihcayton/)
 * (@carihcayton)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/)
 * Hi – is it possible to change the drop down menu color and the feature Read More
   button colors?
 * I love your orange and blue skins and would love to combine them a bit. Currently
   I have it set to blue and thought bringing in a pop of orange on the read more
   buttons and the drop down menu button (when window is shrunk) would be perfect.
 * Thanks! 🙂

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193134)
 * 1) See [http://www.themesandco.com/snippet/change-logo-social-icons-tagline-navbar-header/](http://www.themesandco.com/snippet/change-logo-social-icons-tagline-navbar-header/)
   Navbar/Menu Section #21-25
 * 2) Change the color of the Featured Pages Buttons:
 *     ```
       /* Change Featured Pages Button color */
       .btn.btn-primary.fp-button {
       background-color: #FF0000;
       background-image: linear-gradient(to bottom, #FF0000, #0000FF);
       }
       ```
   
 *  Thread Starter [cari.h.cayton](https://wordpress.org/support/users/carihcayton/)
 * (@carihcayton)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193144)
 * hm, neither seems to be working. I was hoping the box with the three lines in
   it (menu icon) would change to orange and the Read more buttons would change 
   to orange.
 * i did your number 2 instructions and used #f26b41 with no luck
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193159)
 * 3-bar button:
 *     ```
       /* Change 3-bar Button color */
       .navbar .btn-navbar {
           background-color: #f26b41;
           background-image: linear-gradient(to bottom, #f26b41, #f26b41);
       }
       ```
   
 * Read More:
 *     ```
       /* Change Featured Pages Button color */
       .btn.btn-primary.fp-button {
       background-color: #f26b41;
       background-image: linear-gradient(to bottom, #f26b41, #f26b41);
       }
       ```
   
 *  Thread Starter [cari.h.cayton](https://wordpress.org/support/users/carihcayton/)
 * (@carihcayton)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193162)
 * Thanks! check it out now [http://www.ispeakdogtraining.com](http://www.ispeakdogtraining.com)–
   it only does it halfway hehe
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193172)
 * You’re such a perfectionist, woof 😉
 *     ```
       /* Change 3-bar Button color  */
       .navbar .btn-navbar,
       .navbar .btn-navbar:hover,
       .navbar .btn-navbar:focus,
       .navbar .btn-navbar:active,
       .navbar .btn-navbar.active,
       .navbar .btn-navbar.disabled,
       .navbar .btn-navbar[disabled] {
           background-color: #f26b41;
           background-image: linear-gradient(to bottom, #f26b41, #f26b41);
       }
       ```
   
 *  Thread Starter [cari.h.cayton](https://wordpress.org/support/users/carihcayton/)
 * (@carihcayton)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193177)
 * perfectionist is a nice way to put it 🙂 Looks PERFECT on my phone, but the Read
   More buttons on my computer are blue and fill halfway with orange upon rollover.
   I’m using Safari, perhaps that’s the issue?
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193179)
 * It needs the same treatment as the 3-bar:
 *     ```
       /* Change Featured Pages Button color */
       .btn.btn-primary.fp-button,
       .btn.btn-primary.fp-button:hover,
       .btn.btn-primary.fp-button:focus,
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active,
       .btn.btn-primary.fp-button.disabled,
       .btn.btn-primary.fp-button [disabled] {
       background-color: #f26b41;
       background-image: linear-gradient(to bottom, #f26b41, #f26b41);
       }
       ```
   
 * Fingers & paws crossed…
 *  Thread Starter [cari.h.cayton](https://wordpress.org/support/users/carihcayton/)
 * (@carihcayton)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193186)
 * lol still only half orange on my browser :-/
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193202)
 * Comes to something when it works in IE and not Safari!
 * I’ll get [@acub](https://wordpress.org/support/users/acub/) to advise…
 *  [acub](https://wordpress.org/support/users/acub/)
 * (@acub)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193219)
 * First, remove all code related to buttons from your custom CSS. Than, add this
   to it:
 *     ```
       .btn.btn-primary.fp-button {
         color: white;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
         background-color: #ee7c2a;
         background-image: -moz-linear-gradient(top, #f78c40, #e16309);
         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f78c40), to(#e16309));
         background-image: -webkit-linear-gradient(top, #f78c40, #e16309);
         background-image: -o-linear-gradient(top, #f78c40, #e16309);
         background-image: linear-gradient(to bottom, #f78c40, #e16309);
         background-repeat: repeat-x;
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff78c40' , endColorstr='#ffe16309' , GradientType=0);
         border-color: #e16309 #e16309 #984306;
         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
         *background-color: #e16309;
         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
       }
       .btn.btn-primary.fp-button:hover,
       .btn.btn-primary.fp-button:focus,
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active,
       .btn.btn-primary.fp-button.disabled,
       .btn.btn-primary.fp-button[disabled] {
         color: white;
         background-color: #e16309;
         *background-color: #c95808;
       }
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active {
         background-color: #b04d07 \9;
       }
       .btn.btn-primary.fp-button:hover,
       .btn.btn-primary.fp-button:focus,
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active,
       .btn.btn-primary.fp-button.disabled,
       .btn.btn-primary.fp-button[disabled] {
         color: white;
         background-color: #e16309;
         *background-color: #c95808;
       }
       .btn.btn-primary.fp-button:active,
       .btn.btn-primary.fp-button.active {
         background-color: #b04d07 \9;
       }
       ```
   
 * Should do the trick.
 * Note: this only changes the buttons under featured pages on first page, not any
   other buttons throughout the website. (At least that’s what I understood you 
   want.)

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Change Button Colors’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 10 replies
 * 3 participants
 * Last reply from: [acub](https://wordpress.org/support/users/acub/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colors-2/#post-4193219)
 * Status: not resolved