Button Custom Colors?

Themes Inspiro
#1

Is there any way to allow me to change the colors of the buttons? I use the color picker in WP Guttenberg editor and specify the colors I want, but then on the live site, the buttons are the default theme link colors. Also, the portfolio button colors can only be changed in the Customizer > Color Scheme window, but I don’t want to use any of those colors. I want to use my own. Is there a bit of CSS I can use in the Additional CSS window I can use to set these buttons to the colors I want? Thanks!

My website: https://www.jasonrjohnston.com/

#2

Hello @jasonrjohnston

I think that the following CSS code will help you to customize the colors of the Gutenberg buttons:

wp-block-button .wp-block-button__link {
    color: #fff;
    font-size: 18px;
    border: 2px solid #0bb4aa;
    background-color: transparent;
}

.wp-block-button .wp-block-button__link:hover {
    border-color: #101010;
    background: #101010;
    color: #fff;
}

However, if that doesn’t work, probably we’ll need more details from you, like:

  • what colors do you want to change: background, text, border-color?

I believe that currently the problem is in the default green border color applied to buttons.

If the border is the problem, you can either make it transparent or remove it at all with one of these CSS code:

.wp-block-button .wp-block-button__link {
    border-color: transparent;
}

or:

.wp-block-button .wp-block-button__link {
    border: none;
}

As for the Portfolio buttons, you can change them using the following CSS code:

.portfolio-archive-taxonomies a {
    padding: 10px 20px;
    border: 2px solid rgba(175, 175, 175, 0.48);
    color: #717175;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

.portfolio-archive-taxonomies a:hover {
    border-color: #0bb4aa;
    color: #0bb4aa;
}

/* Selected category */
.portfolio-archive-taxonomies li.current-cat a {
    border-color: #222;
    color: #222;
}

We’ll probably also add more color options in the future updates to be able to customize the portfolio buttons from the Customizer.

#3

That worked for me! Super easy fix. I look forward to the future updates. Thanks so much!