Question

I am having the following html structure in my page

<button class="badbutton"><span>Text</span></button>

The reason for this is so that I can make the text go a bit lower when the button is pressed, by means of relative positioning of the span when the button is active.

However, in Firefox I have an issue that I cannot solve. When the button is pressed, the span inside it gets a dotted outline, that persists even after the button is no longer pressed. I am attaching a link to an image depicting what I describe.

https://i.stack.imgur.com/mIL1R.png

I have tried everything I could think of in the css, to no avail.

a, a:active img, 
span, 
span:active,
span:focus, 
button, 
button:active span, 
button:focus span, 
button:focus, 
button:active {
    border: none;
    outline: none !important;
}

Any help will be much appreciated.

EDIT: After a friend’s proposal, I ditched the spans altogether and opted to increase the top padding of the button instead, when pressed. Alas, Firefox just keeps adding an outline around the words.

Answer 1

The outline is a focus indicator.

It’s not implemented with CSS borders or outlines on the button itself, since those have a quite different behavior.

You can get rid of it with

::-moz-focus-inner { 
  border: 0;
  padding: 0;
}