Title: Button Block CSS help
Last modified: January 12, 2024

---

# Button Block CSS help

 *  [ewolfram](https://wordpress.org/support/users/ewolfram/)
 * (@ewolfram)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/button-block-css-help/)
 * This has frustrated me for far too long. Seeking help here. WP 6+ using 2024 
   theme and Blocks. The “make a big red button in the header” request came in, 
   while all other buttons on the site are a different style. So I add “additional
   css classes” to the button called header-button and add the following to customize.
   php
 * /* Header Button */
   .header-button {background-color: #d25175 !important;color:#
   ffffff !important;border-color: #d25175 !important;}
 * This accomplishes the task…almost. The button is indeed that pink/red color but
   there is the original brown one px boarder around it.
 * Designer says boarder must go when button is colored. I can’t, for the life of
   me, get that board to be pink/red.
 * I’ve tried all sorts of things with
 * .is-style-outline.is-style-outline.wp-block-button .wp-block-button__link {
   border-
   color: #d25175 !important;}
 * Everything I try to that end, generally either change the entire site default
   button boarder to pink or does nothing at all.
 * The header button also has the class is-style-outline in the Advance/Additional
   CSS field, although I don’t recall putting that there, I guess I must have at
   some point. 
   Full disclosure, I’ve changed the hover style for the default button
   site wide, which works as expected, even overwriting the original boarder with
   the hover color on all buttons, even the header button. It’s the non-hover state
   of the header button that is giving me issues. I want that boarder the same color
   as the button, I guess.
 * /* Button hover */
   .wp-block-button__link:hover {background-color: #37808b !important;
   color: #f1eeea; !important;border-color: #37808b !important;}
 * Thank you,
 * Eric

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

 *  [Aniekan](https://wordpress.org/support/users/anieeedet/)
 * (@anieeedet)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/button-block-css-help/#post-17339217)
 * Hello [ewolfram](https://wordpress.org/support/users/ewolfram/),
   I understand
   that you are having difficulties changing the border color of the header button
   on your WordPress site. I can help you with that.
 * Since you have already added the “header-button” class to the button and added
   the CSS code to customize.php, we need to modify it to remove the border.
 * Here’s the updated CSS code that you can try:
 * `.header-button {
    background-color: #d25175 !important; color: #ffffff !important;
   border: none !important;}
 * This code sets the border property to “none” removing the border from the button.
   
   If you want to keep the border but change its color to the same as the button,
   you can use the following code:
 * `.header-button {
    background-color: #d25175 !important; color: #ffffff !important;
   border-color: #d25175 !important;}
 * This code sets the border-color property to the same color as the button.
   Let
   me know if you have any further questions or concerns.
 * Regards,
   Aniekan
 *  Thread Starter [ewolfram](https://wordpress.org/support/users/ewolfram/)
 * (@ewolfram)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/button-block-css-help/#post-17340708)
 * Hello Aniekan,
 * Thank you so much for the help. I was afraid that removing the boarder caused
   the button to change size upon hover. I ended up solving the issue with this:
 * /* change color on annoying boarder of header-button */
   .header-button .wp-element-
   button {border-color: #d25175 !important;}
 * I targeted the element inside the .header-button, .wp-element-button
 * Kind regards! This issue is resolved.
 * Eric

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

The topic ‘Button Block CSS help’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 2 participants
 * Last reply from: [ewolfram](https://wordpress.org/support/users/ewolfram/)
 * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/button-block-css-help/#post-17340708)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics