buttons

dabblet.css

/*
	buttons
*/

.button {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
height: auto;
border: none;
width: auto;
padding: 10px;
font-size: 14px;
text-transform:uppercase;
font-weight: bold;
font-family: arial, sans-serif;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
text-shadow: 1px 1px 0px rgba(255,255,255,0.7);
outline: none;
background-color: #dbdbdb;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.08), 1px 1px 0px #fff;
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.08), 1px 1px 0px #fff;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.08), 1px 1px 0px #fff;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
border: solid 1px #dadad0;
color: rgba(0,0,0,0.27);
}
.button:hover {
 cursor: pointer;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-transition: background-color 0.7s; 
-webkit-transition: background-color 0.7s; 
-o-transition: background-color 0.7s; 
transition: background-color 0.7s;
}
.button:active, .button:focus {
 outline: none;
background-color: #474747;
-webkit-box-shadow: inset 1px 1px 4px #333;
-moz-box-shadow: inset 1px 1px 4px #333;
box-shadow: inset 1px 1px 4px #3332
border: solid 1px #1a1a1a;
color: #fff;
text-shadow: 1px 1px 0px rgba(0,0,0,.7);
}
.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: #333;
}

body {
   background: #fff;
   text-align: center;
   padding:125px;
}

dabblet.html

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

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

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

settings.json

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