Untitled

dabblet.css

body {
background:#e9e8e1;
}
.button {
    display: inline-block;
    padding: 8px 13px;
    color: #fff;
    font-weight: bold;
    
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    
    font-family: "Rokkitt", Times, "Times New Roman", serif;
    

    border-bottom:1px solid #4a5452;
    border-top:1px solid #495351;
    border-left:1px solid #495351;
    border-right:1px solid #495351;




    border-radius: 5px;
    
    
    
    -moz-box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.5), 0px 1px 1px 0px rgba(0,0,0,0.0); /* FF3.5 - 3.6 */
-webkit-box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.3),inset 0 2px 0px 0px rgba(255,255,255,0.1),  0px 1px 0px 0px rgba(0,0,0,0.3); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
box-shadow: inset 0 1px 1px 0px rgba(255,255,255,0.), 0px 1px 1px 0px rgba(0,0,0,0.8); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
    
    background-color: #7c8e8b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7c8e8b), to(#687a77)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #7c8e8b, #687a77); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #7c8e8b, #687a77); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #7c8e8b, #687a77); /* IE10 */
  background-image:      -o-linear-gradient(top, #7c8e8b, #687a77); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #7c8e8b, #687a77);
}

.button.blue {
border: 1px solid #485d75;
  background-color: #9daab9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9daab9), to(#64768a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #9daab9, #64768a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #9daab9, #64768a); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #9daab9, #64768a); /* IE10 */
  background-image:      -o-linear-gradient(top, #9daab9, #64768a); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #9daab9, #64768a);
}

.big {
font-size: 25px;
}

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lobster+Two:700' rel='stylesheet'type='text/css'>

<a href="#" class="button">Super Long Text Look At It Stretch, Dog</a>

<a href="#" class="button blue">Teeny</a>

<a href="#" class="button">Tiny</a>

<a href="#" class="button">:)</a>

<a href="#" class="button big blue">Big Font!</a>

settings.json

{"view":"split","prefixfree":"1","page":"css"}