<div id='wrapper'>
<fieldset>
<h2>Legend:</h2>
<a type:="checkbox" class='glowBtn'>Waiting</a>
<a type:="checkbox" class='glowBtn hover'>Hover</a>
<a type:="checkbox" class='glowBtn active'>Active</a>
<a type:="checkbox" class='glowBtn Veryactive'>VeryActive</a>
</fieldset>
<fieldset>
<h2>Checkboxes w/ memory!</h2>
<!-- checkbox one -->
<input type='checkbox' id='checkbox1-1' checked='checked' name='checkbox'>
<label for='checkbox1-1'>我</label>
<!-- checkbox two -->
<input type='checkbox' id='checkbox1-2' name='checkbox'>
<label for='checkbox1-2'>你</label>
<!-- checkbox three -->
<input type='checkbox' id='checkbox1-3' name='checkbox'>
<label for='checkbox1-3'>他</label>
<!-- checkbox three -->
<input type='checkbox' id='checkbox1-4' name='checkbox'>
<label for='checkbox1-4'>俄</label>
<!-- checkbox three -->
<input type='checkbox' id='checkbox1-5' name='checkbox'>
<label for='checkbox1-5'>國</label>
<!-- checkbox three -->
<input type='checkbox' id='checkbox1-6' name='checkbox'>
<label for='checkbox1-6'>滴</label>
</fieldset>
<fieldset>
<h2>Box!</h2>
<div>Hi guys!</div>
</fieldset>
</div>
@import "compass/css3";
@import "compass/css3";
@import url(https://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='checkbox'] + 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='checkbox']{
display: none;
}
$btn_width:110px;
$btn_height:$btn_width * .3;
/* -------------------
Default State
-------------------- */
a.glowBtn, input[type='checkbox'] + 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='checkbox'] + 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='checkbox'] + label:hover{
color: #AEAEAE;
text-shadow:0 -1px 0 rgba(0,0,0,.4);
}
a.glowBtn:hover:after, a.hover:after, input[type='checkbox'] + label:hover:after{
@include background-image(linear-gradient(#545454,#373738));
}
/* -------------------
Active States
-------------------- */
a.glowBtn:active, a.active,a.active:hover, input[type='checkbox']: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='checkbox']: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);
}
/* -------------------
checkbox Specific Style
-------------------- */
input[type='checkbox'] + label{
font-family: Arial, sans-serif;
font-size: $btn_width/4;
line-height: $btn_width/2;
letter-spacing: 0;
width:$btn_width/2;
height:$btn_width/2;
//margin: 0;
}
input[type='checkbox'] + label:after{
top:$btn_height * .08;
left: (-$btn_width /2)/2.2;
width:$btn_width/2.2;
height:$btn_width/2.2;
}
View Compiled
/*==================
This is a rebound of my "Tide Ui" On Dribbble:
http://dribbble.com/shots/745911-Tide-Ui
.toggleClass("colored");
==================*/
.toggleClass("know");
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.