BonBon+

dabblet.css

/**
 * BonBon+
 *
 * This is an improvement over BonBon CSS3 buttons
 *
 * @see: http://lab.simurai.com/css/buttons/
 */

/* Fonts being used */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face {
  font-family: 'Pictos';
  src: url('pictos-web.eot');
  src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web.ttf') format('truetype'), url('pictos-web.svg#webfontphKv1xv9') format('svg');
  font-weight: normal;
  font-style: normal;
}


#container {
  padding: 4em;
}

.button {
  /* Box model */
  margin: auto;
  border-top: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 0;
  border-right: 0;
  outline: 0;
  padding: 0.5em 0.6em 0.3em;
  display: inline-block;
  position: relative;
  
  /* Text */
  color: #996300;
  font: normal 700 150%/100% 'Lobster', sans-serif, monospace;
  text-decoration: none;
  text-shadow: rgba(255, 255, 255, .5) 0 1px 0;
  
  /* Box Decoration */
  background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(http://lab.simurai.com/css/buttons/noise.png);
  background-color: hsl(0, 0%, 75%);
  background-color: #ffa600;
  border-radius: 0.5em;
  box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;

  /* Transitions */
  transition: background .2s ease-in-out;  
}

.button:hover {
  background-color: hsl(39, 100%, 65%);
}

.button:focus {
  outline: none;
  color: rgba(254,255,255,0.9) !important;
  text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}

.button:active {
  top: .3em;
  box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px;
  background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://lab.simurai.com/css/buttons/noise.png);
}

/* Prefix data-icon */
.button::before {
  font-family: 'Droid Sans', sans-serif; monospace;
  padding-right: 0.3em;
  content: attr(data-icon);
}
/* Glassy */
.button::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 60%;
  top: 0;
  left: 5%;
  
  border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
  background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
}

dabblet.html

<div id="container">
  <a href="" class="button" data-icon="♥">Love me!</a>
  <a href="" class="button" data-icon="♠">Click me!</a>
  <a href="" class="button" data-icon="☠">Don't!</a>
  <a href="" class="button" data-icon="♪">Play!</a>
</div>

settings.json

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