CodePen

HTML

            
              <div class="roundedTwo">
	<input type="checkbox" value="None" id="roundedTwo" name="check" />
	<label for="roundedTwo">yes</label>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  @include box-sizing(border-box);
}

body {
  background: #fff;
}

@mixin border-radius($radius...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-border-radius: $radius;
  }

  border-radius: $radius;
}

/*********************
TRANISTION
*********************/

/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to 
 for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/

@mixin transition($transition...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-transition: $transition;
  }

  transition: $transition;
}
/*********************
BOX SHADOWS
*********************/

/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include box-shadow(inset 0 0 4px rgba(0,0,0,0.22));
*/

@mixin box-shadow($shadow...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-box-shadow: $shadow;
  }

  box-shadow: $shadow;
}


/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdue it.
*********************/

/* @include css-gradient(#dfdfdf,#f8f8f8); */
@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) {
	background-color: $to;
	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background-image: -webkit-linear-gradient(top, $from, $to);
	background-image: -moz-linear-gradient(top, $from, $to);
	background-image: -o-linear-gradient(top, $from, $to);
	background-image: linear-gradient(to bottom, $from, $to);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to',GradientType=0 );
}

/* ROUNDED TWO */

input[type=checkbox] {
  visibility: hidden;
}
.roundedTwo {
  width: 28px;
  height: 28px;
  background: #fcfff4;
  @include css-gradient(#fcfff4,#b3bead);
  margin: 20px auto;
  @include border-radius(50px);
        @include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5));
  position: relative;
  label {
    text-indent: -99999px;    
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
     @include border-radius(50px);
    left: 4px;
    top: 4px;
      @include box-shadow( inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1));
     @include css-gradient(#222222,#45484d);
    &:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity = 0);
      opacity: 0;
      content: '';
      position: absolute;
      width: 9px;
      height: 5px;
      background: transparent;
      top: 5px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    &:hover::after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity = 30);
      opacity: 0.3;
    }
  }
  input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity = 100);
    opacity: 1;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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