# 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

<!DOCTYPE html>
<html>
<title>CSS button</title>
<body>

<hr>

<hr>

</body>
</html>


CSS

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

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

.button {
display:inline-block;
text-decoration:none;
border:0;
margin:0;
}

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

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

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

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

.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

<link rel="stylesheet" href="css/main.css">


Becomes

<link rel="stylesheet" href="css/main.css" />


Notice the /> 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

1. <img />
2. <hr />
3. <br />
4. <input />
5. <area />
6. <link />
7. <meta />

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.

• Thanks for this feedback! Regarding the self closing tags, I prefer to not self close but I keep this consistent. As you mentioned, HTML5 is a little blurry on this. I think it's preference, to be honest. Jan 22 '14 at 16:53
• if you ever code for XML or XHTML and you are used to doing this, you will get errors and not know where they came from. it's not a good idea, and shouldn't be your preference, in my opinion
– Malachi
Jan 22 '14 at 17:30
• That's true, and a good point. Jan 23 '14 at 16:26