CTA Widget – set button border active state

  • Resolved gohloum

    (@gohloum)


    7 years, 9 months ago

    Hello,

    I am using the CTA Image widget which includes a button. I am able to style it with no border for up and hover, hower if I press down on the button I see a white border with a blur. If I move my mouse off and release, the border stays. I assume this is the active state and I tried just adding some CSS to elementor-button class to set border-style to none, border: 0px, etc., in the CSS panel under the advanced tab, but it’s not removing the border. Any ideas how to deal with this issue?

Viewing 1 replies (of 1 total)
  • Thread Starter gohloum

    (@gohloum)

    7 years, 9 months ago

    I resolved this issue and I just wanted to post how and more details.

    The issue was only happening in Google Chrome. Also I am using the wp-bootstrap-4 theme and I have created my child theme from that.

    To resolve, I added the following code in the CSS panel for the CTA Image widget:

    a:focus, button:focus, input:focus, textarea:focus {
    outline: none;
}

    A quick google search led me to this page which gives a brief explanation of this symptom which is actually a focus issue not a button:active which is what I originally thought.

    Remove Focus Border from Chrome

    I’m primarily a backend developer, so my experience with CSS is minimal, therefore I hope this information will be helpful to others in the future.

Viewing 1 replies (of 1 total)

The topic ‘CTA Widget – set button border active state’ is closed to new replies.