Buttons

by JamesKyle

HTML

<strong>Hell
<button>no</button>
</strong>
that
<a class="button lowercase" href="#">is</a>
<em>not</em>
<span class="button uppercase">my</span>
job
<div class="button dark">...</div>

<hr>

<h1 style="font-size: .75em;"><button class="blue">Hello World</button></h1>
<button class="pink strongish em">Hello World</button>
<button class="red strong">Hello World</button>
<button class="yellow stronger">Hello World</button>
<button class="green strongest">Hello World</button>


<button class="strongest custom" style="background-color: #36c">Hello World</button>

<hr>

CSS

* {
  -webkit-box-sizing: border-box;
   -khtml-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 87.5%;
  font-size: 14px;
}
body {
  position: relative;
  top: 0; bottom: 0; min-height: 100%;
  left: 0; right: 0; width: 100%;
  padding: 0; margin: 0;
  font-size: 1em; line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -khtml-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
  opacity: .999999;
  -webkit-transform: translate3d(0, 0, 0);
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-acative.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}




button, .button {
    -webkit-appearance: none;
    -webkit-box-align: center;
    
    display: -moz-inline-stack;
    *display: inline; zoom: 1;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    
    width: auto !important;
    height: auto !important;
    padding: .5em 1em;
    margin: .07142857143em;
    
    font: inherit;
    line-height: 1em;
    
    letter-spacing: inherit;
    word-spacing: inherit;
    
    text-transform: capitalize;
    text-decoration: inherit;
    
    text-align: center;
    text-indent: 0;
    
    color: rgba(0, 0, 0, .85);
    text-shadow: 0 .07142857143em 0 rgba(255, 255, 255, .25);
    
    background: rgba(0, 0, 0, .1);
   ...