Plain CSS buttons in different sizes Just a plain button, in different sizes. I wanted to achieve exactly the same styling cross browser for both anchors, inputs and buttons.

I'm just wondering if this could be improved.

Markup

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;CSS button&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;a href="#" class="button button-tiny button-primary"&gt;Sign up&lt;/a&gt;
        &lt;a href="#" class="button button-primary"&gt;Sign up&lt;/a&gt;
        &lt;a href="#" class="button button-medium button-primary"&gt;Sign up&lt;/a&gt;
        &lt;a href="#" class="button button-large button-primary"&gt;Sign up&lt;/a&gt;

        &lt;hr&gt;

        &lt;input type="submit" class="button button-tiny button-primary" value="Sign up"&gt;
        &lt;input type="submit" class="button button-primary" value="Sign up"&gt;
        &lt;input type="submit" class="button button-medium button-primary" value="Sign up"&gt;
        &lt;input type="submit" class="button button-large button-primary" value="Sign up"&gt;

        &lt;hr&gt;

        &lt;button class="button button-tiny button-primary"&gt;Sign up&lt;/button&gt;
        &lt;button class="button button-primary"&gt;Sign up&lt;/button&gt;
        &lt;button class="button button-medium button-primary"&gt;Sign up&lt;/button&gt;
        &lt;button class="button button-large button-primary"&gt;Sign up&lt;/button&gt;
    &lt;/body&gt;
&lt;/html&gt;


CSS

body,
input,
button {
    font: 14px "Trebuchet MS", sans-serif;
}

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

.button {
    padding:8px 16px;
    display:inline-block;
    text-decoration:none;
    border-radius:3px;
    border:0;
    margin:0;
}

input[type="submit"].button,
button.button {
    cursor:pointer;
    outline:none;
}

.button-tiny {
    font-size:12px;
    padding:6px 14px;
}

.button-medium {
    font-size:16px;
    padding:10px 18px;
}

.button-large {
    font-size:18px;
    padding:12px 20px;
}

.button-primary {
    background:slategrey;
    color:#fff;
}

.button-primary:hover {
    background:lightslategrey;
};
I took the liberty of adding your code to a Fiddle Here so that we could see what it being displayed and test it in different browsers.



I tried to set my Browser to IE 8 and less and apparently it doesn't play nice with JSFiddle.  but in IE 9 mode it showed up very nicely, exactly the same as in Chrome.



I like that you created a CSS class button-primary so that you didn't repeat the code you were going to use in all the buttons. and so you didn't have to write so many :hover statements.  



Overall I would say that this is some pretty clean code.

But, there is one thing that I would suggest that you do.

Terminate every tag

This

&lt;link rel="stylesheet" href="css/main.css"&gt;


Becomes 

&lt;link rel="stylesheet" href="css/main.css" /&gt;


Notice the /&gt; at the end.  if there is no closing tag you should still "close the tag"

these are called Self closing Tags. 

some Tags are self closing tags and some are not. HTML5 is a little blurry on this, or I am a little blurry on HTML5 

either way you should make sure that these tags


&lt;img /&gt;
&lt;hr /&gt;
&lt;br /&gt;
&lt;input /&gt;
&lt;area /&gt;
&lt;link /&gt;
&lt;meta /&gt;


and some others.   This Answers Lists some more



XHTML allows you to Self Close any tag, this isn't really good practice, mostly because most tags are meant to be containers and leaving them empty would be really silly.



This more recent answer from BoltClock explains a little bit better about closing tags.

I recommend always closing your tags, even if the Doctype tells you that you don't have to. it is better practice.