Good button
{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}
// alert('Hello world!');
<p>A <strong>button</strong> with relative units—fitting into whatever baseline you're working with. Change the <code>font-size</code> of the <code>html</code> element and gasp in awe as the button adjusts to a multiple of whatever your type desires. It requires <code>box-sizing</code>.</p>
<a class="btn btn-large" href="#">Large</a>
<a class="btn" href="#">Medium</a>
<a class="btn btn-small" href="#">Small</a>
<a class="btn btn-mini" href="#">Mini</a>
/**
* Good button
*/
html {
font: 24px sans-serif;
background: #ddd -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%);
background-position: left top;
background-size: 100% 12px;
}
body {
width: 60%;
margin: 2rem auto;
font-size: 1rem;
line-height: 1.5rem;
}
p { margin: 1rem 0; }
code { color: #a06053; }
/* Da button */
.btn {
display: inline-block;
height: 2rem;
padding: .9rem 1ex;
font-size: 1rem;
line-height: 0;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: 0 .05rem .1rem rgba(0,0,0,.2);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: #e06053;
border: .1rem solid rgba(0,0,0,.2);
border-radius: .15em;
box-shadow: inset 0 .05rem 0 rgba(255,255,255,.1);
box-sizing: border-box;
user-select: none;
}
.btn-large {
height: 3rem;
padding-bottom: 1.4rem;
padding-top: 1.4rem;
font-size: 1.5rem;
}
.btn-small {
height: 1.5rem;
padding-bottom: .7rem;
padding-top: .7rem;
font-size: .75rem;
}
.btn-mini {
height: 1rem;
padding-bottom: .45rem;
padding-top: .45rem;
font-size: .6rem;
}