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
<!DOCTYPE html> <html> <head> <title>CSS button</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <a href="#" class="button button-tiny button-primary">Sign up</a> <a href="#" class="button button-primary">Sign up</a> <a href="#" class="button button-medium button-primary">Sign up</a> <a href="#" class="button button-large button-primary">Sign up</a> <hr> <input type="submit" class="button button-tiny button-primary" value="Sign up"> <input type="submit" class="button button-primary" value="Sign up"> <input type="submit" class="button button-medium button-primary" value="Sign up"> <input type="submit" class="button button-large button-primary" value="Sign up"> <hr> <button class="button button-tiny button-primary">Sign up</button> <button class="button button-primary">Sign up</button> <button class="button button-medium button-primary">Sign up</button> <button class="button button-large button-primary">Sign up</button> </body> </html> 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; }; 
