YouTube Footer Buttons

dabblet.css

/*
	YouTube Footer Buttons 
*/

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   box-shadow: 0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.button:hover {
   border-color: #999;
   background: linear-gradient(top,white 0,#E0E0E0 100%);
   box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active, .button:focus {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   box-shadow: inset 0 1px 2px #aaa;
   background: linear-gradient(top,#E6E6E6 0,gainsboro 100%);
}
.button:after {
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border-top: 4px solid #999;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin: 0 0 0 4px;
   position: relative;
   top: -1px;
}
.button:hover:after {
   border-top-color: black;
}

body {
   background: #e8e8e8;
   text-align: center;
   padding: 100px;
}

dabblet.html

<button class="button" role="button">
  Button #1
</button>

<button class="button" role="button">
  Button #2
</button>

<button class="button" role="button">
  Button #3
</button>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}