CODEWITHSUNDEEP
buttoncsscross-browserstyles
Oliver Spryn
Oliver Spryn

Reputation: 17368

CSS Button Tweaks

I have built a custom <button>, which is styled completely using CSS and CSS3. Everything works very well, with the exception of a few visual annoyances that vary across browsers.

I notice in Internet Explorer and Firefox after my button is pressed, a dotted border is visible around the text of the button, like this:

enter image description here

This is not the case with Chrome or Opera.

Also, during the button click in Internet Explorer and Opera, the text of the button moves to indicate that the user clicked the button:

enter image description here

This is not an issue within Chrome or Firefox.

Is there a way within CSS to remove the dotted border and shifting text within the above mentioned browsers?

Upvotes: 2

Views: 307

Answers (1)

Ryan Kempt
Ryan Kempt

Reputation: 4209

Can you show current CSS on the buttons? I think something like this would fix the issue for you in Internet Explorer not sure of FireFox...

a.button:active, a.button:selected, a.button:visited { 
    border: none;
    outline: none;
}

Upvotes: 1

Related Questions