Title: Button Hover Colour
Last modified: May 10, 2021

---

# Button Hover Colour

 *  Resolved [rpwordp](https://wordpress.org/support/users/rpwordp/)
 * (@rpwordp)
 * [5 years ago](https://wordpress.org/support/topic/button-hover-colour/)
 * Hi, I can change the colour of buttons in the block but the hover colour always
   reverts to the default, is there an easy way of fixing this, both globally or
   for a specific button?

Viewing 1 replies (of 1 total)

 *  Plugin Author [Twentig](https://wordpress.org/support/users/twentig/)
 * (@twentig)
 * [5 years ago](https://wordpress.org/support/topic/button-hover-colour/#post-14433913)
 * Hi.
 * For the Twenty Twenty-One theme, under Customizer > Colors & Dark Mode, Twentig
   adds options to change the colors of the default buttons globally. However, if
   you change the color or a specific button block, the hover color reverts to the
   default (this is how Twenty Twenty-One designed the buttons). To override it,
   you can create a custom CSS class. The example below shows how to create a `custom-
   button` class that will be applied to a button block:
 * First add the following CSS in the Customizer > Additional CSS:
 *     ```
       .wp-block-button.custom-button .wp-block-button__link:hover,
       .wp-block-button.custom-button .wp-block-button__link:active,
       .wp-block-button.custom-button .wp-block-button__link:focus {
       	background: #ff0000 !important;
       	color: #fff !important;
       	border-color: transparent !important;
       }
       ```
   
 * Then in the block editor, select your button block, open the [settings sidebar](https://wordpress.org/support/article/button-block/),
   and type `custom-button` in the Additional CSS Class(es) field under the Advanced
   panel.
 * Replace the color values as you like.
 * I hope the above is useful to you.
    Tom

Viewing 1 replies (of 1 total)

The topic ‘Button Hover Colour’ is closed to new replies.

 * ![](https://ps.w.org/twentig/assets/icon.svg?rev=2569439)
 * [Twentig Supercharged Block Editor – Blocks, Patterns, Starter Sites, Portfolio](https://wordpress.org/plugins/twentig/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/twentig/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/twentig/)
 * [Active Topics](https://wordpress.org/support/plugin/twentig/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/twentig/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/twentig/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Twentig](https://wordpress.org/support/users/twentig/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/button-hover-colour/#post-14433913)
 * Status: resolved