Adding additional CSS classes to button block type

  • Unknown's avatar
    sjvanek · Member ·

    Hello, I am having a terrible time getting additional CSS styling to show up in the 2020 theme. I do have the lowest-level premium plan and so can add CSS styling. would like to make text smaller than the default text size in the buttons, since I have a few longer-text items in buttons. I have tried a number of ways that it seems to me should work but my suspicion is that the native CSS of the theme is always overriding. I can get the “this block contains unexpected or invalid content” error constantly and even though among the resolution options I can see ones that seem to reflect what I want to do (changing the button text attributes in any number of ways) none of these ever go back to a final resolution with the button looking the way I want it.

    I note that on a paragraph or header block, the added CSS styling works but not the buttons. Is there something important about the order of editing the html, or some incompatibility of the theme with this styling on buttons?

    And yes, I am aware that part of what I am trying to adapt to is my overly long button text for what most designers would like. Please humor me on that, just pretend I want a non-standard color or some quirky font for my button – which yes I tried too and does not work. :)

    The blog I need help with is: (visible only to logged in users)

  • staff-blorbo · Staff ·

    The Button Block doesn’t have a way to set text size itself, but you can override it via Custom CSS https://en.support.wordpress.com/custom-design/custom-css/ like this:

    .wp-block-button__link, input[type="button"], input[type="reset"], input[type="submit"] {
    font-size: 5rem;
}
  • Unknown's avatar
    sjvanek · Member ·

    Hi, that is great, thanks! Sorry to be dense and it will just save me some searching, but if I want to introduce back into that button format, the nice 2020 theme feature where the whole button changes color on hover, could I also put that into the button theme? I tried adding to the .wp-block-button_link the code,

    a:hover {
    color: “green”;
    }

    for example but it does not seem to work — thanks for any help.

    Steve

  • Unknown's avatar
    sjvanek · Member ·

    Ok, I was being lazy, I think I have it, seems to work adding as a separate CSS for .wp-block-button

    .wp-block-button__link:hover {
    color: blue;
    background-color: #00e673;
    }

    for example (nice gaudy blue and green hover, we’ll work on that)

    would there be a way to incorporate that into the CSS you sent me? As you can tell I really am on the learning curve! Thanks again.

  • kokkieh · Staff ·

    would there be a way to incorporate that into the CSS you sent me?

    There’s no need to incorporate it. Just add the CSS you worked out on a new line after the CSS staff-blorbo gave you. You can add as many different CSS rules as you want in the Customizer, to target different areas of your site.

    I also want to mention you can get help with CSS via the live chat support included in your plan. You can reach our live chat team by clicking the help icon bottom-right on the My Site pages.

  • The topic ‘Adding additional CSS classes to button block type’ is closed to new replies.