SEC Buttons

dabblet.css

/**
 * SEC Buttons
 */
body{
	background-color: #e2e2e2;
	padding-top: 50px;
}
div#spacing{
	/* only for development NOT USED */
	height: 100px;
}


/* The real stuff is below */


div.bwrapper{
	float: left;
	position: relative;
	height: 27px;
	overflow: hidden;
}
div.bwrapper div{
	visibility: hidden;
	padding: 3px 20px;
}
.bwrapper a {
	 text-decoration: none;
	 font-family: "Verdana", sans-serif;
	 font-size: 12px;
	 line-height: 15px;
}
.bwrapper a.gb{
	float: right;
}
.bwrapper a.eb{
	float: left;
	margin-right: -23px;
}

.bwrapper.gas .gb,
.bwrapper.elec .eb{
	/* active state button */
	 cursor: default;
	 text-shadow: 0px 1px 1px #FFF;
	 background-image:    -moz-linear-gradient(top, #d6d6d6, #ADADAD);
	 color: #555555;
	 padding: 4px 14px 5px;
	 border-top: 1px solid white;
	 border-bottom: 1px solid #868686;
	 border-radius: 12px;
	 box-shadow: 0px 0p 1px 0px #444444;
}
.bwrapper.gas .eb,
.bwrapper.elec .gb{
	/* inactive */
	background-image:    -moz-linear-gradient(top, #ededed, #c1c1c1);
	color: #888888;
	padding: 2px 14px 4px;
	border-radius: 11px;
	border-top: 1px solid white;
	border-bottom: 1px solid #868686;
	margin-top: 2px;
}

.bwrapper.elec .gb{
	padding-left: 30px;
}
.bwrapper.gas .eb{
	padding-right: 30px;
}

.bwrapper.elec .gb:hover{
	background-image:    -moz-linear-gradient(top, #9EDDF3, #28B4E4);
	color: white;
}
.bwrapper.gas .eb:hover{
	background-image:    -moz-linear-gradient(top, #F7797D, #E41B23);
	color: white;
}

dabblet.html

<div class="bwrapper elec"><a href="#" class="gb">Gas</a><a href="#" class="eb">Elekriciteit</a><div>GasElectriciteit</div></div>
<div id="spacing"></div>
<div class="bwrapper gas"><a href="#" class="eb">Elekriciteit</a><a href="#" class="gb">Gas</a><div>GasElectriciteit</div></div>

settings.json

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