Cacher is the code snippet organizer for pro developers

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}

// alert('Hello world!');

<p>A <strong>button</strong> with relative units&mdash;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;
}