Filter buttons

dabblet.css

/**
 * Filter buttons
 */
* {
  border: 0;
  border-collapse: collapse;
  empty-cells: show;
  margin: 0;
  padding: 0; }

body {
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif; }

:link, :visited, :hover, :active, :focus {
  text-decoration: none; }


  #listFilter a.btn_show_search {
	background-color: #828282;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#6B6B6B)); /* Chrome, Safari 4+ */
	background-image: -webkit-linear-gradient(top, #828282, #6B6B6B); /* Chrome 10+, iOS 5+, Safari 5.1+ */
	background-image:    -moz-linear-gradient(top, #828282, #6B6B6B); /* Firefox 3.6-15 */
	background-image:      -o-linear-gradient(top, #828282, #6B6B6B); /* Opera 11.10-12.00 */
	background-image:         linear-gradient(to bottom, #828282, #6B6B6B); /* Firefox 16+, IE 10+, Opera 12.50+ */
	line-height: 20px;
    padding: 1px 33px 1px 23px;
    color: white;
    text-decoration: none;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	position: relative;
	z-index: 1;
}
    #listFilter a.btn_show_search:hover {
	  background-color: #FF2E00;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF2E00), to(#FA0000)); /* Chrome, Safari 4+ */
	  background-image: -webkit-linear-gradient(top, #FF2E00, #FA0000); /* Chrome 10+, iOS 5+, Safari 5.1+ */
	  background-image:    -moz-linear-gradient(top, #FF2E00, #FA0000); /* Firefox 3.6-15 */
	  background-image:      -o-linear-gradient(top, #FF2E00, #FA0000); /* Opera 11.10-12.00 */
	  background-image:         linear-gradient(to bottom, #FF2E00, #FA0000); /* Firefox 16+, IE 10+, Opera 12.50+ */
	  }
	#listFilter a.btn_show_search:after {
	z-index: 3;
	top:4px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	display: block;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #FFF;
	border-width: 5px;
	right: 10px;
	margin-left: -5px;
	}
		#listFilter a.btn_show_search.active:after {
		top: auto;
	bottom:4px;
	border-color: transparent;
	border-bottom-color: #FFF;
	}

dabblet.html

<div id="listFilter">

<a href="#" class="btn_show_search active" title="">Filter</a>
<a href="#" class="btn_show_search" title="">Filter</a>

</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}