millermedeiros/basis.css — Issue #13: add .btn class
Author: millermedeiros
Created: 2012-01-22 15:13:52+00:00
State: open
Labels: feature

styling `` to look like `` and `

` is very hard and I end up copying code from previous projects every time I need it, I think it should be on the widgets folder so at least we have some sample styles.

On my current project I have this as the base button class:

```css
.btn {
display:inline-block; *display:inline; *zoom:1;
margin:0; padding:0; border:0;
line-height:1em;
text-decoration:none !important;
overflow:visible; vertical-align:middle;
cursor:pointer;
}

.btn-label{
display:block; position:relative;
text-align:center;
text-decoration:none !important;
height:1.5em; line-height:1.5em;
}

* html button.btn {
padding-bottom:1px;
}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
button.btn .btn-label{
padding-bottom:2px;
}
}

a.btn {
/* some weird size difference in firefox*/
padding:1px 0;
}
```

markup

```html

Foo

Bar

```

not sure where this technique came from, I probably copied it from multiple people over the past years and tweaked it as well.