CSS3 Buttons

  • Resolved edouardcoleman

    (@edouardcoleman)


    11 years ago

    Hello Scott! Thanks for your theme. I love it. I m using it with 3 different sites.

    When i add a CSS3 buttons on a page and I hover it, an underline appears (which has the “Accent Color”) exactly at the foot of the button. And the button text gets also the same color.
    I’ve tried with other themes and it worked just fine: no line, no color change..

    Do you know how to get rid of it, with a code or anything?

    You can see what I mean by using “All in One Buttons” or “MaxButtons” plugins.

    Thanks in advance!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link us a page that has the issue?

    Thread Starter edouardcoleman

    (@edouardcoleman)

    I fixed the color problem. But there is still the underline

    https://architecturebasis.com/representation/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try removing the underline (border-bottom) on:

    .no-touch .entry-content a:hover

    Thread Starter edouardcoleman

    (@edouardcoleman)

    Well… I m a beginner. What do I have to do exactly? There is a “custom CSS” box in the customiser. Maybe I can put a code in to fix it?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yeah that sounds like the right place to put it in, you need to add “border-bottom” and set it to “none” to those selectors (above).
    https://www.w3schools.com/cssref/pr_border-bottom.asp

    Thread Starter edouardcoleman

    (@edouardcoleman)

    I tried to do what you say but I didn t manage it to work.

    I tried with a button from “All in One Buttons” plugin and thats even worse: first a border appears all around the button with the “Accent Color” (still here!) and right after, the underline!!

    And again, there are no prob with other themes. it works perfectly on them.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So you tried this:

    .no-touch .entry-content a:hover {
 border-bottom: none;
}

    Thread Starter edouardcoleman

    (@edouardcoleman)

    You are the best. It works perfectly when I use this code. No underline anymore.
    Thanks!!!

    Thread Starter edouardcoleman

    (@edouardcoleman)

    The hover border with the “Accent Color” was still there, without any border bottom. So I had to remove the fixed border (from MaxButtons), by filling a border width equal to 0.
    Now, without any fixed border, the button looks a bit flat, but its actually ok.
    It prefer this than a hover border in 2 parts!..

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS3 Buttons’ is closed to new replies.