Button Block CSS help

  • ewolfram

    (@ewolfram)


    2 years, 1 month ago

    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

    (@anieeedet)

    2 years, 1 month ago

    Hello 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

    (@ewolfram)

    2 years, 1 month ago

    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.