Some neat button styling with CSS

Standard browser buttons aren’t really super good-looking, but the fancy solutions I came across so far all used to involve pictures and hackish div manipulations. Although I did wish to improve the look of buttons, I didn’t want it to become a maintenance mess. I recently searched for this again, and eventually found this nice list, with 22 different approaches.
That’s 21 too much so I suppose you can find your dream solution (or at least one close enough) there. Personally the first one was actually pretty much what I wanted: clean design, no picture unless I want to add icons (which I’ll progressively do), theoretically simple CSS. I say “theoretically” because when you look at the page presenting it, the code seems kind of… dense.

I think the reason why their code is so detailed is because they tried to fix every possible broken browser. After all, this was published 3 years ago, when browser market shares were problematically rich in MSIE, hm, 7 or 8? If you do care about the few (fractions of?) percents of users still using terribly outdated browsers, I suppose you should get the full CSS style and HTML. But if you’ve decided like me that you’re done dealing with dinosaurs, here is the cleanup code, simplified to my needs:

button {
display:inline;
margin:2px 5px 2px 0;
background-color:#f0f0f0;
border:1px solid #ccc;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:100%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:2px 10px 2px 6px;
}

button img{margin:0 2px -2px 0 !important;}

button:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#369;
}

This works nice in all modern browsers, as far as I tested (MSIE 9, Iron/Chrome 17, Opera 12, Firefox 12, Safari 5.1). I’ll link to my working sample whenever I finally put it online (might by in a while though).