Plain CSS buttons in different sizes
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.