Inconsistency between Full & Outline Button

  • Resolved Michael

    (@michael-luther)


    2 years ago

    On sites I maintain, I have noticed different padding between the two button types.

    The outline button has too less padding. It is possibly created by a unnecessary style specification.

    .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button .wp-block-button__link.is-style-outline {
  border: 2px solid;
  padding: .667em 1.333em; /* ! */
}

    The phenomenon occurs with version > 1.48

    Can you relate to this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Yann

    (@collet)

    Hi Michael,

    Thanks for the feedback. Would you please tell me which theme and version of WordPress you’re using? Can you share the URL of one of your websites?

    Thanks,
    Yann

    Thread Starter Michael

    (@michael-luther)

    Hi Yann,

    thank you very much for your response.

    WordPress v6.1
    Twenty Twenty v2.1
    (everything is up to date)

    On the home page in the first cover block you can see both buttons next to each other.

    …

    • This reply was modified 2 years ago by Michael.
    • This reply was modified 2 years ago by Michael.
    Plugin Support Yann

    (@collet)

    You’re right, the outline button has an unnecessary style specification that overrides the theme’s button styles. WordPress has added this CSS since the 6.1 version. We’ll add a fix in the next Twentig release. In the meantime, if you want to fix it, you can add the following CSS code in the Customizer > Additional CSS panel:

    .wp-block-button.is-style-outline > a.wp-block-button__link {
    padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem);
}

    Hope that helps,
    Yann

    If you enjoy Twentig, please rate it. It would really help me out ??

    Thread Starter Michael

    (@michael-luther)

    Ok, then it’s because of WordPress.

    Before I posted the URL to the website, I had already implemented the fix via Customizer.

    Thank you Yann for taking a closer look. ?? ??

    Reviewed

    Plugin Support Yann

    (@collet)

    Thanks! ????

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Inconsistency between Full & Outline Button’ is closed to new replies.