Action button toolbar

dabblet.css

/**
 * Action button toolbar
 */
 
/* dabblet */
html,body { background:#f5f5f5; font-family:'proxima nova'; margin:10px }
* { margin:0; padding:0 }
menu { display:inline-block }  
 
/* buy dropdown button */
menu.buy {
  background-image:url(http://f.cl.ly/items/1C1N290s1V323k3S0U47/actionmenus.png); color:#fff;
  font-weight:600; font-size:12px; line-height:24px; z-index:2 }
menu.buy { float:left; margin:0 0 -1px 0; width:107px; position:relative; cursor:pointer;
  background-position:0 0; padding:33px 0 0; height:0 }
menu.buy:hover { background-position:0 -33px }

/* like button (defaults) */
button.like { border:1px solid #d4d4d4; border-radius:6px;
  position:relative; text-indent:-300px; overflow:hidden;
  line-height:25px; cursor:pointer; background:rgb(255,255,255); 
  background:linear-gradient(top,rgb(255,255,255)0%,rgb(237,237,237)100%) }
  button.like:before { background:url(http://f.cl.ly/items/0D2V3B2a3v0p010y1c3s/likesprite.png) no-repeat 0 0;    content:''; position:absolute; top:7px; left:25px;
    height:15px; width:18px }
  button.like:hover { border:1px solid #d4d4d4; background:rgb(245,245,245);
    background:linear-gradient(top,rgb(250,250,250)0%,rgb(232,232,232)100%) }
  button.like:active { border:1px solid #d4d4d4; background:rgb(225,225,225);
    background:linear-gradient(top,rgb(227,227,227)0%,rgb(245,245,245)100%) }

/* action buttons (buy, like); back to topic links */
.toolbar { display:inline-block; border-radius:6px; margin-top:10px;
  padding-top:1px; background:#f2f2f2; vertical-align:top;
  background:linear-gradient(top, rgba(170,170,170,0.2) 0%,rgba(255,255,255,0.3) 100%);
  box-shadow:0 1px 1px white, inset 0 1px 2px 0px #777; background-color:#eee; height:32px }

.toolbar button:hover,
.toolbar a:hover { text-decoration:none !important }
  
.toolbar button,
.toolbar menu.share { text-transform:uppercase; cursor:pointer; border:0; z-index:2;
  color:#505050; font-weight:bold; font-size:10px; line-height:32px; background:transparent;
  position:relative; text-indent:25px; padding:0 21px 0 17px; border-radius:6px  }
  .toolbar button:before,
  .toolbar menu.share:before { content:''; position:absolute; top:10px; left:17px;
    display:inline-block; height:15px; width:18px }
  .toolbar button:hover,
  .toolbar menu.share:hover { background:#eaeaea; border:0;
    background:linear-gradient(top, rgba(144,144,144,0.1) 0%,rgba(244,244,244,0.2) 100%) }
  .toolbar button:active,
  .toolbar menu.share:active { background:#ddd; border:0;
    background:linear-gradient(top, rgba(100,100,100,0.2) 0%,rgba(200,200,200,0.2) 100%) }
	
.toolbar button.like { padding:0 30px 0 26px }
.toolbar button.like:before { top:9px; left:27px }
	
.toolbar.like-bar { position:relative; z-index:2 } 
.toolbar.share-bar { position:relative; left:-11px; z-index:1 }
.toolbar menu.share { width:44px; text-indent:-999px }
.toolbar menu.share:after { content:''; background:url('http://f.cl.ly/items/1C1N290s1V323k3S0U47/actionmenus.png') no-repeat -302px -34px; 
	width:39px; height:17px; position:absolute; left:29px; top:6px }

dabblet.html

<span class="toolbar like-bar">                                       
  <menu class=buy></menu>
  <button class=like>Like</button>
</span>

<span class="toolbar share-bar"> 
  <menu class=share>Share</menu>
</span>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}