Button

Button.markdown

Button

Inspired by Alex Sharpz's work on Dribbble http://drbl.in/gunm

A Pen by Mojtaba Seyedi on CodePen.

License.

index.html

<div class="container">
		<input type="checkbox" id="power" name="power" />
		<label for="power" class="power">
			<span class="icon-off"></span>
			<span class="light"></span>
		</label>
</div>

style.css

body {
  background-color: #1b1b1b;
}
.container {
  width  : 150px;
  height : 130px;
  padding-top : 20px;
  margin : 50px auto ;
}

#power {
  display : none;
}

label {
  display : block;
  width   : 100px;
  height  : 100px;
  border-radius : 50%;
  position   : relative;
  margin     : auto;
  border     : 4px solid #636679;
  background : -webkit-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :    	 radial-gradient(center , ellipse cover, #fefefe 0% , #EEE 80% , #FFF 100%);
  box-shadow : inset 0 -5px 10px 0 #d0d5eb , inset 0 5px 10px 0 #FFF , 0 0 0 1px #333;
  cursor     : pointer;
  text-align  : center;
  font-size   : 40px;
  color       : #0f0;
  line-height : 100px;
  text-shadow : -1px -1px 0px #FFF , 1px 1px 0px #FFF;
  transition : all .1s ease-in-out;
}

label:after , label:before {
  display : block;
  content : "";
  position: absolute;
}

label:before {
  width  : 150px;
  height : 150px;
  border-radius : 20px;
  background    : -webkit-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :    -moz-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :         linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  box-shadow    : 0 10px 30px 0 #000 ;
  top     : -25px;
  left    : -25px;
  z-index : -2;
}

label:after {
  width  : 130px;
  height : 130px;
  border-radius : 50%;
  background : #fff;
  top  : -15px;
  left : -15px;
  z-index : -1;
  box-shadow : 0 -2px 5px 0px #fefefe , 0 2px 5px 0 #ccc;
  background: rgb(210,215,237);
  background: -webkit-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:    -moz-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:         linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
}

.light {
  display    : block;
  width      : 12px;
  height     : 12px;
  position   : absolute;
  top        : -12px;
  right      : -12px;
  background : -webkit-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :         radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  box-shadow : inset 0 1px 1px 0 #333 ,inset 0 -1px 1px 0 #333 , 0 0 5px 1px #bade32;
  border-radius : 50%;
  transition : all .1s ease-in-out;
}

.icon-off {
  position : absolute;
  top      : 0;
  left     : 0;
  right    : 0;
  bottom   : 0;
  margin   : auto;
  width    : 40px;
  height   : 40px;
  border-radius : 50%;
  background : #d6f804;
  box-shadow : inset 0 0 4px 0 #999;
  transition : all .1s ease-in-out;
}

.icon-off:after {
  display  : block;
  content  : '';
  position : absolute;
  top      : 0; bottom : 0;
  left     : 0; right  : 0;
  margin   : auto;
  width    : 26px;
  height   : 26px;
  border-radius : 50%;
  background    : #eee;
  box-shadow : 0 0 3px 0 #999;
  z-index    : 2;
}

.icon-off:before {
  display  : block;
  content  : '';
  position : absolute;
  top      : -5px;
  left     : 0; right  : 0;
  margin   : auto;
  width    : 8px;
  height   : 25px;
  background : #d6f804;
  box-shadow : inherit;
  border-radius : 10px;
  border-style  : solid;
  border-width  : 0 3px 0;
  border-color  : #EEE;
  z-index    : 3;
  transition : all .1s ease-in-out;
}

#power:checked + label {
  background : -webkit-radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :         radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :         radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  box-shadow : inset 0 -5px 10px 0 #aaa , inset 0 5px 10px 0 #aaa , 0 0 0 1px #333;
  transition : all .1s linear;
  
}

#power:checked + label .light { 
  background : -webkit-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :         radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  box-shadow : inset 0 1px 1px 0 #555 ,inset 0 -1px 1px 0 #555 , 0 0 5px 0 #f55;
  transition : all .1s linear;
}

#power:checked + label .icon-off {
  background : transparent;
  box-shadow : inset 0 0 5px 0 #777;
  transition : all .1s linear;
} 

#power:checked + label .icon-off:after {
  background : inherit;
  box-shadow : 0 0 5px 0 #777;
} 

#power:checked + label .icon-off:before {
  background   : #ddd;
  border-color : #dfdfdf;
  box-shadow   : inherit;
  transition : all .1s linear;
}