<div class="container">
<h1><span>Checkboxes <i class="fa fa-check" aria-hidden="true"></i></span> with FontAwesome and CSS3 vol.1</h1>
<a href="https://github.com/eisenfox/checkboxes-css3" target="_blank" title="Check on github"><i class="fa fa-check" aria-hidden="true"></i> Check on github</a>
<a href="http://fox-hover.co.uk/codepen-challenge-checkboxes" target="_blank" title="Check in Blog"><i class="fa fa-check" aria-hidden="true"></i> Check in Blog</a>
<!-- checkbox #1 form -->
<form>
<h2>Effect #1</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-1" id="get-up-1" type="checkbox" value="get-up-1" name="get-up-1"/>
<label for="get-up-1">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-1" id="make-bed-1" type="checkbox" value="make-bed-1" name="make-bed-1"/>
<label for="make-bed-1">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-1" id="clean-teeth-1" type="checkbox" value="clean-teeth-1" name="clean-teeth-1"/>
<label for="clean-teeth-1">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-1" id="dress-up-1" type="checkbox" value="dress-up-1" name="dress-up-1"/>
<label for="dress-up-1">Dress Up</label>
</div>
</form>
<!-- checkbox #2 form -->
<form>
<h2>Effect #2</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-2" id="get-up-2" type="checkbox" value="get-up-2" name="get-up-2"/>
<label for="get-up-2">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-2" id="make-bed-2" type="checkbox" value="make-bed-2" name="make-bed-2"/>
<label for="make-bed-2">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-2" id="clean-teeth-2" type="checkbox" value="clean-teeth-2" name="clean-teeth-2"/>
<label for="clean-teeth-2">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-2" id="dress-up-2" type="checkbox" value="dress-up-2" name="dress-up-2"/>
<label for="dress-up-2">Dress Up</label>
</div>
</form>
<!-- checkbox #3 form -->
<form>
<h2>Effect #3</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-3" id="get-up-3" type="checkbox" value="get-up-3" name="get-up-3"/>
<label for="get-up-3">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-3" id="make-bed-3" type="checkbox" value="make-bed-3" name="make-bed-3"/>
<label for="make-bed-3">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-3" id="clean-teeth-3" type="checkbox" value="clean-teeth-3" name="clean-teeth-3"/>
<label for="clean-teeth-3">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-3" id="dress-up-3" type="checkbox" value="dress-up-3" name="dress-up-3"/>
<label for="dress-up-3">Dress Up</label>
</div>
</form>
<!-- checkbox #4 form -->
<form>
<h2>Effect #4</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-4" id="get-up-4" type="checkbox" value="get-up-4" name="get-up-4"/>
<label for="get-up-4">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-4" id="make-bed-4" type="checkbox" value="make-bed-4" name="make-bed-4"/>
<label for="make-bed-4">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-4" id="clean-teeth-4" type="checkbox" value="clean-teeth-4" name="clean-teeth-4"/>
<label for="clean-teeth-4">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-4" id="dress-up-4" type="checkbox" value="dress-up-4" name="dress-up-4"/>
<label for="dress-up-4">Dress Up</label>
</div>
</form>
<!-- checkbox #5 form -->
<form>
<h2>Effect #5</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-5" id="get-up-5" type="checkbox" value="get-up-5" name="get-up-5"/>
<label for="get-up-5">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-5" id="make-bed-5" type="checkbox" value="make-bed-5" name="make-bed-5"/>
<label for="make-bed-5">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-5" id="clean-teeth-5" type="checkbox" value="clean-teeth-5" name="clean-teeth-5"/>
<label for="clean-teeth-5">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-5" id="dress-up-5" type="checkbox" value="dress-up-5" name="dress-up-5"/>
<label for="dress-up-5">Dress Up</label>
</div>
</form>
<!-- checkbox #6 form -->
<form>
<h2>Effect #6</h2>
<div class="checkbox-block">
<!--checkbox 1-->
<input class="checkbox-effect checkbox-effect-6" id="get-up-6" type="checkbox" value="get-up-6" name="get-up-6"/>
<label for="get-up-6">Get Up</label>
<!--checkbox 2-->
<input class="checkbox-effect checkbox-effect-6" id="make-bed-6" type="checkbox" value="make-bed-6" name="make-bed-6"/>
<label for="make-bed-6">Make a Bed</label>
<!--checkbox 3-->
<input class="checkbox-effect checkbox-effect-6" id="clean-teeth-6" type="checkbox" value="clean-teeth-6" name="clean-teeth-6"/>
<label for="clean-teeth-6">Cleen Teeth</label>
<!--checkbox 4-->
<input class="checkbox-effect checkbox-effect-6" id="dress-up-6" type="checkbox" value="dress-up-6" name="dress-up-6"/>
<label for="dress-up-6">Dress Up</label>
</div>
</form>
</div>
//vars
$accent-font-color: #DB324D;
$border-color: #5a5a5a;
$icon-color-1: #fff;
$icon-color-2: #00711b;
$icon-color-3: #FD5200;
$icon-color-4: #72195A;
$icon-color-5: #C42021;
$icon-bg-1: #1B998B;
$icon-bg-2: #275DAD;
//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
/* common styles !!!YOU DON'T NEED THEM */
body {
font: {
family: 'Archivo', sans-serif;
size: 20px;
}
color: #5a5a5a;
}
.container {
width: 800px;
margin: 50px auto 0px;
text-align: center;
& > a {
color: #1f1f1f;
font: {
size: 20px;
}
display: inline-block;
margin-top: 20px;
i {
color: $accent-font-color;
}
&:nth-child(2) {
&:after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border: 2px solid $accent-font-color;
border-radius: 20px;
margin: 0px 10px 0px 15px;
position: relative;
top: -2px;
}
}
}
}
h1 {
text-align: center;
font-size: 25px;
span {
font: {
family: 'Satisfy', cursive;
size: 35px;
}
color: $accent-font-color;
position: relative;
}
}
form {
margin-top: 55px;
&:last-child {
margin-bottom: 55px;
}
h2 {
font: {
size: 20px;
weight: 700;
}
color: #000;
margin-bottom: 30px;
}
}
/* input styles !!!YOU NEED THEM */
.checkbox-block {
display: flex;
justify-content: space-between;
}
.checkbox-effect:not(:checked),
.checkbox-effect:checked{
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
position: relative;
display: flex;
align-items: center;
}
/* checkbox effect #1 */
.checkbox-effect-1:not(:checked) + label:before,
.checkbox-effect-1:checked + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 3px;
margin-right: 20px;
}
.checkbox-effect-1:not(:checked) + label:after,
.checkbox-effect-1:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 11px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 2px, $top: 0);
color: $icon-color-1;
transform-origin: center center;
}
.checkbox-effect-1:not(:checked) + label:after {
transform: scale(0);
}
.checkbox-effect-1:checked + label:before {
background-color: $icon-bg-1;
border-color: $icon-bg-1;
@include transition-mix;
}
.checkbox-effect-1:checked + label:after {
transform: scale(1);
@include transition-mix($delay: 0.2s);
}
/* checkbox effect #2 */
.checkbox-effect-2:not(:checked) + label:before,
.checkbox-effect-2:checked + label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 10px;
margin-right: 20px;
@include transition-mix($delay: 0.2s);
}
.checkbox-effect-2:not(:checked) + label:after,
.checkbox-effect-2:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 18px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 0px, $top: 0);
color: $icon-color-2;
}
.checkbox-effect-2:not(:checked) + label:after {
opacity: 0;
@include transition-mix;
}
.checkbox-effect-2:checked + label:before {
opacity: 0;
@include transition-mix;
}
.checkbox-effect-2:checked + label:after {
opacity: 1;
@include transition-mix($delay: 0.2s);
}
/* checkbox effect #3 */
.checkbox-effect-3 + label {
overflow: hidden;
}
.checkbox-effect-3:not(:checked) + label:before,
.checkbox-effect-3:checked + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 3px;
margin-right: 20px;
}
.checkbox-effect-3:not(:checked) + label:after,
.checkbox-effect-3:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 11px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 3px, $top: 0);
color: $icon-color-3;
@include transition-mix($timing: cubic-bezier(0, 1.31, 1, 1));
}
.checkbox-effect-3:not(:checked) + label:after {
left: -52px;
}
.checkbox-effect-3:checked + label:after {
left: 3px;
}
/* checkbox effect #4 */
.checkbox-effect-4:not(:checked) + label:before,
.checkbox-effect-4:checked + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 3px;
margin-right: 20px;
@include transition-mix($delay: 0.2s);
}
.checkbox-effect-4:not(:checked) + label:after,
.checkbox-effect-4:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 22px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 2px, $top: 0);
color: $icon-color-4;
@include transition-mix;
transform-origin: center center;
opacity: 0;
}
.checkbox-effect-4:not(:checked) + label:after {
transform: scale(0);
}
.checkbox-effect-4:checked + label:before {
transform: scale(0);
opacity: 0;
@include transition-mix;
}
.checkbox-effect-4:checked + label:after {
transform: scale(1);
opacity: 1;
@include transition-mix($delay: 0.2s, $timing: cubic-bezier(0.57, 1.9, 0, 1.52));
}
/* checkbox effect #5 */
.checkbox-effect-5:not(:checked) + label:before,
.checkbox-effect-5:checked + label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 10px;
margin-right: 20px;
transform-origin: center center;
@include transition-mix;
}
.checkbox-effect-5:not(:checked) + label:after,
.checkbox-effect-5:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 10px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 1px, $top: 0);
color: $icon-color-1;
}
.checkbox-effect-5:not(:checked) + label:after {
opacity: 0;
}
.checkbox-effect-5:checked + label:before {
transform: scale(1.5);
background-color: $icon-bg-2;
border-color: $icon-bg-2;
@include transition-mix($timing: cubic-bezier(0.57, 1.9, 0, 1.52));
}
.checkbox-effect-5:checked + label:after {
opacity: 1;
@include transition-mix($delay: 0.2s);
}
/* checkbox effect #6 */
.checkbox-effect-6:not(:checked) + label:before,
.checkbox-effect-6:checked + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid $border-color;
box-sizing: border-box;
border-radius: 3px;
margin-right: 20px;
}
.checkbox-effect-6:not(:checked) + label:after,
.checkbox-effect-6:checked + label:after {
content: "\f00c";
font: {
family: fontawesome;
size: 21px;
}
display: flex;
height: 100%;
align-items:center;
@include position-absolute($left: 1px, $top: -2px);
color: $icon-color-5;
text-shadow: 0px -1px 0px #fff;
transform-origin: center center;
}
.checkbox-effect-6:not(:checked) + label:after {
transform: scale(1,0);
}
.checkbox-effect-6:checked + label:after {
transform: scale(1,1);
@include transition-mix;
}
View Compiled
This Pen doesn't use any external JavaScript resources.