Gutenberg button block underline

  • n3aviation

    (@n3aviation)


    5 years, 7 months ago

    For some reason, by default the Gutenberg Button Block shows an underline of the link.
    It seems impossible to remove that underline.
    I have inserted the following additional CSS:
    .wp-block-button__link {
    font-size: medium;
    text-decoration: none;
    border: none;
    }
    The font size change is correctly applied, but the underline strangely remains.

    If anyone can help that would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • James Hunt

    (@bonkerz)

    5 years, 7 months ago

    You theme has the following CSS:

    .entry-content a {
text-decoration: underline;
}

    This means all a links inside your posts (with class entry-content) will have an underline.

    The Gutenberg button is a link, but is inside .entry-content so due to CSS specificity the rule you are applying is ignored.

    This should work: 

    .entry-content a:not(.wp-block-button__link) {
 text-decoration: underline;
}

.wp-block-button__link {
 font-size: medium;
 text-decoration: none;
 border: none;
}

    The :not() command tells the CSS to ignore the links if they have a class of .wp-block-button__link

    Thread Starter n3aviation

    (@n3aviation)

    5 years, 6 months ago

    Many thanks for this.
    The solution worked by by adding .entry-content in front of .wp-block-button__link in the second part.

    Great stuff.

    michelledumay

    (@michelledumay)

    5 years, 2 months ago

    Is there CSS code for removing the underlines on links in the Gutenberg block – table of contents?

    Does it get inserted into my theme CSS or the additional CSS entry on the block itself?

    Thanks in advance.

    James Hunt

    (@bonkerz)

    5 years, 2 months ago

    You should insert custom CSS via the theme customiser, not in the block HTML directly.

    The Table of Contents block you refer to cannot be the Gutenberg core block as it has yet to be officially released, so it must be part of a plugin or theme. You should speak to the plugin/theme author about the issue.

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

The topic ‘Gutenberg button block underline’ is closed to new replies.