Firefox button CSS issue

Question

JSFIDDLE I am trying to write styling for a button in CSS. The css code:

.btn{
    border: solid 1px rgba(210, 210, 210, 0.69);
    outline: none;
    color: black;
    background-color: #E8E8E8;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    margin: 2px;
    display: inline-block;
    text-indent: 0;
    font-style: normal;
    font-size: 12px;
    padding: 3px 7px;
}

This works great for input tags and a tags

<input type='submit' class='btn'>
<button class='btn'>Submit</button>

The issue is with the a tag

<a href='#' class='btn'>Submit</a>

In chrome and safari, it works great, but in firefox, the sizing is off, how can I fix this?

Firefox "a" button issue

Gray Spectrum · Accepted Answer · 2014-08-08 19:58:26Z

1

Try adding this to your css:

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

answered Aug 8, 2014 at 19:58

Gray Spectrum

7332 gold badges7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bencripps · Accepted Answer · 2014-08-08 19:58:23Z

1

Here's a JSBin that should help: http://jsbin.com/gujetoze/1/edit?css,output

Since the issue only occurs in FireFox, you should use a query selector for FF, and increase the padding. I've also removed the text-decoration, but that's up to you.

@-moz-document url-prefix() { 
  a.btn {
     padding: 4px 7px
  }
}

answered Aug 8, 2014 at 19:58

bencripps

2,0433 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Firefox button CSS issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related