style a tag and input tag the same

Question

I want to style the a and the input the same, but there's a kind of padding around the input or something. How do I solve this? Fiddle below.

I'm using Firefox

Output:

HTML:

<input type="button" value="lala" />
<a>lala</a>

CSS:

input{
    padding: 0;
    margin: 0;
    margin-left: 30px;
    border-spacing: none;
    background: none;
    box-shadow: none;
    border: none;

    float: left;
    background-color: #005f83;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    box-sizing: content-box;
}
a{
    margin-left: 30px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
    background-color: #005f83;
    color: #fff;
    box-sizing: content-box;
}

This fiddle explains it all I guess:

http://jsfiddle.net/bqhL9fej/

I tried a lot but nothing works. I want my <input> to look the same as the <a> , NOT the other way around. Is there a solution for this?

Answer 1

They looked the same to me except for the cursor.

For that, add cursor:pointer to the 'a' styles

Safe practice to follow here would be:

input{
    padding: 0;
    margin: 0;
    margin-left: 30px;
    border-spacing: none;
    background: none;
    box-shadow: none;
    border: none;
}

a, input {
    margin-left: 30px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
    background-color: #005f83;
    color: #fff;
    box-sizing: content-box;
    cursor:pointer;
}

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

Answer 2

Add this, it will remove inner padding and border in Firefox

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