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

---

# Change Button Colours

 *  Resolved [daviaannette](https://wordpress.org/support/users/daviaannette/)
 * (@daviaannette)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/)
 * How can I change the color of my buttons, including the hover.
 * Here’s the link to my site [http://blog.makemypinata.com](http://blog.makemypinata.com)

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

 *  [SomewhatRounded](https://wordpress.org/support/users/somewhatrounded/)
 * (@somewhatrounded)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207202)
 * Hey,
    I took a quick look, and I assume you’re using some custom css? If not,
   you might want to, or create a child theme, so your changes won’t be lost when
   there are updates for your theme 🙂
 * The css responsible for your main nav is:
 *     ```
       .main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item {
           background: none repeat scroll 0 0 #6E6E6E;
       }
       .navigation-main {
           background: none repeat scroll 0 0 #6E6E6E;
       }
       .navigation-main ul {
           margin: 0 30px;
       }
       .navigation-main a {
           color: #FFFFFF;
           padding: 10px;
           position: relative;
       }
       .navigation-main li {
           background: none repeat scroll 0 0 #6E6E6E;
       }
       .navigation-main li:hover {
           background: none repeat scroll 0 0 #808181;
       }
       .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
           background: none repeat scroll 0 0 #00CBC5;
       }
       .navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul > .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
           background: none repeat scroll 0 0 #00CBC5;
       }
       .navigation-main ul > .current_page_item:hover a:after, .navigation-main ul > .current-menu-item:hover a:after, .navigation-main ul > .current-post-ancestor:hover a:after, .navigation-main ul > .current-menu-ancestor:hover a:after, .navigation-main ul > .current-menu-parent:hover a:after, .navigation-main ul > .current-post-parent:hover a:after {
           border-top-color: #00CBC5;
       }
       .navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
           background: none repeat scroll 0 0 #00CBC5;
       }
       .navigation-main ul > .current_page_item ~ .current_page_item a:hover, .navigation-main ul > .current-menu-item ~ .current-menu-item a:hover, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
           background: none repeat scroll 0 0 #00CBC5;
       }
       .navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
           border-left: 6px solid rgba(0, 0, 0, 0);
           border-right: 6px solid rgba(0, 0, 0, 0);
           border-top: 6px solid #00CBC5;
           bottom: -6px;
           content: "";
           font-size: 0;
           left: 50%;
           line-height: 0;
           margin-left: -6px;
           position: absolute;
           width: 0;
           z-index: 9995;
       }
       ```
   
 * #00CBC5 is your current page colour, #6E6E6E is your dark grey, and #808181 is
   your lighter grey(hover) colour. All you need to do is use your desired colours
   in place of those codes 🙂 If the code above isn’t already apart of your custom
   css, you only need to copy the relevant sections to apply changes.
 * Hope that helps! Let me know if you need anything else (I tried to explain the
   best I could but I’ve been a bit under the weather today)
 *  Thread Starter [daviaannette](https://wordpress.org/support/users/daviaannette/)
 * (@daviaannette)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207210)
 * Thanks,….but
 * I wasn’t talking about my nav. buttons. I was talking about the “Continue Reading”
   and “Subscribe” button.
 *  [SomewhatRounded](https://wordpress.org/support/users/somewhatrounded/)
 * (@somewhatrounded)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207213)
 * Similar situation then, with having a custom stylesheet or child theme.
 * The css would be something like:
 *     ```
       button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, .wpm-button-primary, a.wpm-button-primary {
           background: #yourcolour;
           color: #yourtextcolor;
       }
       button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
           background: #yourhovercolour;
       }
       ```
   
 * Neat idea, btw. Hope it all works out!
 *  Thread Starter [daviaannette](https://wordpress.org/support/users/daviaannette/)
 * (@daviaannette)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207366)
 * .button, input[type=”button”], input[type=”reset”], input[type=”submit”],
    .button-
   primary, a .button-primary, .wpm-button-primary, a .wpm-button-primary { background:#
   fa5858; color: #ffffff; }
 * .button:hover, input[type=”button”]:hover, input[type=”reset”]:hover, input[type
   =”submit”]:hover,
    .button-primary:hover, a .button-primary:hover, .wpm-button-
   primary:hover, a .wpm-button-primary:hover, button:focus, input[type=”button”]:
   focus, input[type=”reset”]:focus, input[type=”submit”]:focus, .button-primary:
   focus, a .button-primary:focus, .wpm-button-primary:focus, a .wpm-button-primary:
   focus, button:active, input[type=”button”]:active, input[type=”reset”]:active,
   input[type=”submit”]:active, .button-primary:active, a .button-primary:active,.
   wpm-button-primary:active, a .wpm-button-primary:active { background: #00cbc5;}
 * The code you gave me only changed the colors of the subscribe button. It does
   not change the colours of the “Continue reading” button.
 * Please help.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207367)
 * Are you changing theme files or adding your changes to custom CSS?
 * Please also use the code buttons when posting code on these forums.
 *  Thread Starter [daviaannette](https://wordpress.org/support/users/daviaannette/)
 * (@daviaannette)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207368)
 * sorry
 * I am using the custom CSS
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207376)
 * Try adding this:
 *     ```
       .button-primary, a.button-primary {
           background-color: #fa5858;
       }
       ```
   
 *  Thread Starter [daviaannette](https://wordpress.org/support/users/daviaannette/)
 * (@daviaannette)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207381)
 * Thanks it worked 🙂
 *  [vanessajw](https://wordpress.org/support/users/vanessajw/)
 * (@vanessajw)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207496)
 * I found just changing my continue reading button background hover colour worked
   with this: just change the RGB colour numbers at the end line.
 *     ```
       }
   
       button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
           background: none repeat scroll 0% 0% rgb(117, 119, 120);
       }
       ```
   
 *  [vanessajw](https://wordpress.org/support/users/vanessajw/)
 * (@vanessajw)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207497)
 *     ```
       }
   
       button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
           background: none repeat scroll 0% 0% rgb(117, 119, 120);
       }
       ```
   

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

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

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

 * 10 replies
 * 4 participants
 * Last reply from: [vanessajw](https://wordpress.org/support/users/vanessajw/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/change-button-colours-1/#post-4207497)
 * Status: resolved