CodePen

HTML

            
              <div id='wrapper'>
			<fieldset>
				<h2>Buttons!</h2>
				<a class='glowBtn'>Button</a>
				<a class='glowBtn hover'>Hover</a>
				<a class='glowBtn active'>Active</a>
			</fieldset>
			<fieldset>
				<h2>Radio Buttons!</h2>
				<!-- Radio one -->
				<input type='radio' id='radio1-1' checked='checked' name='radio'>
				<label for='radio1-1'>8</label>
				<!-- Radio two -->
				<input type='radio' id='radio1-2' name='radio'>
				<label for='radio1-2'>7</label>
				<!-- Radio three -->
				<input type='radio' id='radio1-3' name='radio'>
				<label for='radio1-3'>6</label>
			</fieldset>
			<fieldset>
				<h2>The Super Button!</h2>
				<a class='superBtn'>Super Button</a>
			</fieldset>
		</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import "compass/css3";
@import url('http://fonts.googleapis.com/css?family=Lobster');
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot");
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Lobster);
body{
	margin: 0;
	padding:0;
	background:url('http://www.bradysammons.com/codepen/darkui/noise.png') repeat;
	padding:30px;
}
a, input[type='radio'] + label{
		text-align: center;
		display: inline-block;
		text-decoration: none;
		cursor: pointer;
		font-family: 'Trebuchet MS', Helvetica, sans-serif;	
	}
fieldset{
	border:1px solid #222;
	@include border-radius(8px);
	margin:20px 0 0 0;
	min-height: 90px;
	line-height: 90px;
	position: relative;
	float: left;
	margin-right: 20px;
	padding:20px;
	h2{
		font-family: 'Lobster', cursive;
		font-weight: normal;
		text-shadow:0 1px 0 rgba(255,255,255,.12);
		display: inline-block;
		margin: 0;
		line-height: 1.5;
		position: absolute;
		top: -20px;
		background:url('http://www.bradysammons.com/codepen/darkui/noise.png') repeat;
		padding: 0 5px 0 10px;
	}
}
input[type='radio']{
	display: none;
}
$btn_width:110px;
$btn_height:$btn_width * .3;
/* -------------------
	Default State
-------------------- */
a.glowBtn, input[type='radio'] + label{
	z-index: 10;
	margin: 0 10px 10px 0;
	width: $btn_width * 1.05;
	height: $btn_height * 1.13;
	line-height: $btn_height * 1.1;
	position: relative;
	font-size: $btn_width * .12;
	letter-spacing: .1em;
	color: #0e0e0e;
	text-shadow: 0 1px 0 rgba(255,255,255,.1);
	font-weight: bold;
	@include background-image(linear-gradient(#111,#000));
	@include border-radius(3px);
	@include box-shadow(
		//-----Button Beveling-----
		//top dark bevel
		0 -1px 0 rgba(0,0,0,.2),
		//full bevel
		0 0 0 1px rgba(0,0,0,.3),
		//bottom highlight bevel
		0 1px 0 rgba(255,255,255,.05),
		//slight outer glow
		0 0 3px rgba(255,255,255,.2));
}

//This is the style for the actual Button
a.glowBtn:after, input[type='radio'] + label:after{
	z-index: -1;
	content: '';
	cursor: pointer;
	// center content
	top:$btn_height * .06;
	margin-left: 50%;
	left: -$btn_width /2;
	width: $btn_width;
	height: $btn_height;
	display: block;
	position: absolute;
	@include background-image(linear-gradient(#444,#373738));
	@include box-shadow(
		inset 0 2px 1px -1px rgba(255,255,255,.2),
		inset 0 -2px 1px -1px rgba(0,0,0,.2),
		//-----Drop Shadow-----
		0 12px 12px rgba(0,0,0,.5),
		0 4px 6px rgba(0,0,0,.3));
	@include border-radius(2px);
}
/* -------------------
	Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='radio'] + label:hover{
	color: #AEAEAE;
	text-shadow:0 -1px 0 rgba(0,0,0,.4);
}
a.glowBtn:hover:after, a.hover:after, input[type='radio'] + label:hover:after{
	@include background-image(linear-gradient(#545454,#373738));
}
/* -------------------
	Active States
-------------------- */
a.glowBtn:active, a.active,a.active:hover, input[type='radio']:checked + label{
	color: #00ccff;
	text-shadow:0 -1px 0 rgba(0,0,0,.3),0 0px 30px rgba(0,255,255,.7);
	@include box-shadow(
		//-----Button Beveling-----
		//top dark bevel
		0 -1px 0 rgba(0,193,255,.2),
		//full bevel
		0 0 0 1px rgba(0,0,0,.4),
		//bottom highlight bevel
		0 1px 0 rgba(255,255,255,.05),
		//slight outer glow
		0 0 20px rgba(0,193,255,.1),
		0 0 30px rgba(0,193,255,.1));
}
a.glowBtn:active, a.active,a.active:hover{
	text-shadow:0 -1px 0 rgba(0,0,0,1),0 0px 30px rgba(0,255,255,1),0 0px 50px rgba(0,255,255,1);
	}
a.glowBtn:active:after, a.active:after,a.active:hover:after, input[type='radio']:checked + label:after{
	@include background-image(linear-gradient(#262627, #2d2d2e));
	@include box-shadow(
		inset 0 5px 6px rgba(0,0,0,.3), 
		inset 0 0 4px rgba(0,0,0,.9), 0 0 0 black);
}

/* -------------------
	Radio Specific Style
-------------------- */
input[type='radio'] + label{
	font-family: 'ModernPictogramsNormal', Arial, sans-serif;
	font-size: $btn_width/3;
	line-height: $btn_width/2;
	letter-spacing: 0;
	width:$btn_width/2;
	height:$btn_width/2;
	//margin: 0;
}
input[type='radio'] + label:after{
	top:$btn_height * .08;
	left: (-$btn_width /2)/2.2;
	width:$btn_width/2.2;
	height:$btn_width/2.2;
}

/* -------------------
	SuperBtn
-------------------- */

a.superBtn{
	color: #0e0e0e;
	text-shadow: 0 1px 0 rgba(255,255,255,.1);
	font-weight: bold;
	letter-spacing: .08em;
	width:$btn_width*2.2;
	height:$btn_height*1.2;
	line-height: $btn_height*1.2;
	position: relative;
	@include border-radius(30px);	
	@include background-image(linear-gradient(#2e3537,#424748));
	@include box-shadow(
			inset 0 1px 0 rgba(255,255,255,.6),
			inset 0 -1px 0 rgba(0,0,0,.3),
			inset 0 0 0px 1px rgba(0,0,0,.1),
			0 0 1px  rgba(0,0,0,.5),
			0 2px 2px rgba(0,0,0,.4));
			
}
a.superBtn:after{	
	width:$btn_width*2.3;
	height:$btn_height*1.5;
	top:$btn_height*-.15;
	margin-left: 50%;
	left: -$btn_width*2.3 /2;
	content: '';
	display: block;
	@include border-radius(30px);
	@include background-image(linear-gradient(#2af1fc,#17b2e6));
	@include box-shadow(
			0 -1px 1px rgba(0,0,0,.7), 
			0 1px 1px rgba(255,255,255,.4),
			0 0 1px 1px rgba(0,0,0,.3),
			inset 0 0px 3px rgba(0,0,0,.4),
			inset 0 1px 2px rgba(0,0,0,.6));
	position: absolute;
	z-index: -1;
}
/* -------------------
	SuperBtn Hover
-------------------- */
a.superBtn:hover{
	color: #AEAEAE;
	text-shadow:0 -1px 0 rgba(0,0,0,.8);
	@include background-image(linear-gradient(#545454,#373738));
}
a.superBtn:hover:after{
	@include box-shadow(
			0 -1px 1px rgba(0,0,0,.7), 
			0 1px 1px rgba(255,255,255,.4),
			0 0 1px 1px rgba(0,0,0,.3),
			inset 0 0px 3px rgba(0,0,0,.4),
			inset 0 1px 2px rgba(0,0,0,.6),
			0 0 15px 5px rgba(0, 255, 255,.2));
}
a.superBtn:active{
	color: #00ccff;
	text-shadow:0 -1px 0 rgba(0,0,0,.3),0 0px 30px rgba(0,255,255,.7);	
	background:#333;
	@include box-shadow(
		//0 -1px 1px rgba(0,0,0,.7), 
		0 1px 0px rgba(255,255,255,.4),
		inset 0 3px 3px rgba(0,0,0,.7), 
		inset 0 0 4px rgba(0,0,0,.9), 0 0 0 black);
}
	

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*==================

This is a rebound of my "Tide Ui" On Dribbble:

http://dribbble.com/shots/745911-Tide-Ui

==================*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................