Title: CSS issue with buttons
Last modified: October 30, 2017

---

# CSS issue with buttons

 *  Resolved [magicalwonders](https://wordpress.org/support/users/magicalwonders/)
 * (@magicalwonders)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/css-issue-with-buttons/)
 * I have a test site in progress, but am having problems changing the style of 
   a couple of buttons.
 * If you add the product on this page for example – [https://internetsquad.co.uk/product/magic-fabric/](https://internetsquad.co.uk/product/magic-fabric/)
   The “View Basket” and “Checkout” buttons appear in the sidebar. The colour of
   buttons on hover is a sort of grey colour, which looks terrible. I’d like to 
   change this to match the “search” button on hover, which is #DC0E0E
 * I don’t have firebug working anymore, so I’m finding it hard to see where this
   style is coming from?
 * Also the “View Basket” at the top of the main content area is problematic. I 
   want to change the text colour to white for both normal and hover, and have the
   size of the button, the same as it is currently showing when on hover. At the
   moment the text changes colour, along with the size of the button! Again, I’m
   finding it hard to see what style is controlling this?
 * Hope someone can advise?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-issue-with-buttons%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [vankaa](https://wordpress.org/support/users/vankaa/)
 * (@vankaa)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/css-issue-with-buttons/#post-9636417)
 * Firebug was replaced by the FF developer tools, just press F12 and you have it.
   The same thing you can use in Chrome.
 *     ```
       .woocommerce-mini-cart__buttons a.button.wc-forward:hover {
           color: #fff;
           background: #DC0E0E;
       }
   
       #ttr_content_margin .woocommerce-message a.button.wc-forward {
           color: #fff;
           padding: 6px 12px;
           font-size: 16px;
           font-family: Arial;
       }
       ```
   
 *  Thread Starter [magicalwonders](https://wordpress.org/support/users/magicalwonders/)
 * (@magicalwonders)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/css-issue-with-buttons/#post-9636569)
 * Hi Vankaa,
 * Thanks for the info about developer tools! 🙂
 * Also, the code snippet you’ve provided works great! I appreciate the help! 🙂

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

The topic ‘CSS issue with buttons’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [buttons](https://wordpress.org/support/topic-tag/buttons/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * 2 replies
 * 2 participants
 * Last reply from: [magicalwonders](https://wordpress.org/support/users/magicalwonders/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/css-issue-with-buttons/#post-9636569)
 * Status: resolved