HTML forms have a lot of elements which function differently. Some of them provide options while others need input from the user. HTML checkboxes are a good example of this. Checkboxes give the user an option to select one or more items from a set of alternatives simply by ticking or marking the box with a check. Typically, an ordinary textbox has only one traditional and boring design.
Modern websites are designing their checkboxes to make it look more attracting and adding more animation. Thanks to CSS3 it’s possible to do so. With the animation @keyframe property, you can animate checkbox design to make them look more dazzling.
In today’s tutorial, I am sharing how you can create an amazing checkbox design. You’ll learn how to replace a traditional checkbox and add some CSS3 animation. Let’s get started.
Demo 1: Simple Animated Checkbox
We’re going to create a simple checkbox animation using Font Awesome, along with pseudo elements, CSS3 transition and opacity.
Setting Up the HTML
For our markup, we’re going to have a standard unordered list but we will change the information and options for every demo. For each list, we’re going to place a checkbox tag along with the label tag.
<ul>
<li>
<input type="checkbox" name="manager" id="manager" />
<label for="manager">Project Manager</label>
</li>
<li>
<input type="checkbox" name="webdesigner" id="webdesigner" />
<label for="webdesigner">Web Designer</label>
</li>
<li>
<input type="checkbox" name="webdev" id="webdev" />
<label for="webdev">Web Developer</label>
</li>
<li>
<input type="checkbox" name="seo" id="seo" />
<label for="seo">SEO</label>
</li>
<li>
<input type="checkbox" name="itstaff" id="itstaff" />
<label for="itstaff">IT Staff</label>
</li>
<li>
<input type="checkbox" name="csr" id="csr" />
<label for="csr">Customer Service Representative</label>
</li>
</ul>
This is all we need for our markup. The next thing we need to do is to work on the CSS.
Working With the CSS
To start, hide the original checkbox.
/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
display: none;
}
Next, we need to set some styles on our list and label tags with a relative position and padding. Then, we need to set up styles using our pseudo code before and after our label. For this part, we’re going to set the checkbox font to Font Awesome as we’re going to use an icon.
/* Checkbox Icons */
label {
position: relative;
padding-left: 30px;
font-size: 30px;
cursor: pointer;
color: #fff;
padding: 16px 28px 0 0;
}
label:before, label:after {
font-family: FontAwesome;
font-size: 50px;
/*absolutely positioned*/
position: absolute; top: 0; left: -49px; right: 10px;
}
Now we need to set up which icons step before and after the checkbox is clicked. Instead of using the icon tag via Font Awesome, we will be using the unicode version with a transition and opacity to show and hide the icon.
label:before {
content: 'f096'; /*checkbox unchecked */
}
label:after {
content: 'f00c'; /*checkbox checked*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
font-size: 27px;
top: 16px;
left: -42px;
color: #f2ca27;
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
The final step is to set a target to the text box and the after pseudo code of checkbox and give it a max-width of 25px and opacity of 1 to reveal the check icon once the box is clicked.
/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
max-width: 25px;
opacity: 1;
margin-right: 90px;
}
Demo 2: Circle Checkbox Bouncing Animation
In this second demo, we’re going to create a circle checkbox that looks like a radio button with a bouncing animation using CSS3 along with some pseudo elements, CSS3 transition and @keyframe animation.
The Markup
Our markup is just like the markup of the first demo but we will change some text and labels. Check out the markup below.
<ul>
<li>
<input type="checkbox" name="php" id="php" />
<label for="php">PHP</label>
</li>
<li>
<input type="checkbox" name="js" id="js" />
<label for="js">JavaScript</label>
</li>
<li>
<input type="checkbox" name="ajax" id="ajax" />
<label for="ajax">AJAX</label>
</li>
<li>
<input type="checkbox" name="ruby" id="ruby" />
<label for="ruby">Ruby</label>
</li>
<li>
<input type="checkbox" name="python" id="python" />
<label for="python">Python</label>
</li>
</ul>
Working With the CSS
Before moving on the CSS of our labels, hide the original checkbox.
/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
display:none
}
Add some simple styles to our unordered list, such as the font-family, and then set styles on the label element and set the position to relative.
ul li {
list-style:none;
margin:10px auto;
font-family:'Lato'
}
/* Checkbox Icons */
label {
position:relative;
padding-left:30px;
font-size:30px;
cursor:pointer;
color:#fff;
padding:17px 28px 0 0
}
Moving on, style labels with before and after pseudo code. We will again use the Font Awesome icon as our main checked selector. Set the label before pseudo code to the unicode of the plain circle with no holes on it while set up a solid circle icon for our selected/checked icon.
For our CSS3 animation, we will define the name of our @keyframe animation for bouncing out with a .4 seconds duration, an iteration count of 1 and fill mode of forwards move the circle from big size to small size until it fades out with bouncing effect via @keyframe animation.
label:before {
content:'f1db'
}
label:after {
content:'f111';
width:25px;
overflow:hidden;
font-size:27px;
top:18px;
left:-39px;
color:#6CFF4C;
-webkit-animation:bounceout .4s;
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation:bounceout .4s;
-moz-animation-iteration-count:1;
-moz-animation-fill-mode:forwards;
animation:bounceout .4s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
Since the Mozilla browser renders differently when it comes to position and animation let’s add a Mozilla specific CSS to control our layout on the Mozilla Firefox browser.
@-moz-document url-prefix() {
label:after {
content:'f111';
width:25px;
overflow:hidden;
font-size:27px;
top:17px !important;
left:-39px;
color:#6CFF4C;
-webkit-animation:bounceout .4s;
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation:bounceout .4s;
-moz-animation-iteration-count:1;
-moz-animation-fill-mode:forwards;
animation:bounceout .4s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
}
Now let’s work with the bounce. Inside input[type=”checkbox”]:checked + label:after we will target the event where the checkbox was selected, but instead of a plain check we will set an animation of bounce, which will be our bounce-in animation.
/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
-webkit-animation:bounce .4s;
-webkit-animation-iteration-count:1
-moz-animation:bounce .4s;
-moz-animation-iteration-count:1;
animation:bounce .4s;
animation-iteration-count:1
}
Finally, we will work on the @keyframe animation. Using the transform property, we will scale the circle from different sizes and steps and make it look like its bouncing. Check out the code below. If you want to know more about @keyframe animation, please visit this page to learn more.
/* @Keyframes for Chrome and Safari */
@-webkit-keyframes bounce {
0% { -webkit-transform:scale(.8); opacity:.8}
25% { -webkit-transform:scale(.25); opacity:.25}
50% { -webkit-transform:scale(1.4); opacity:1.4}
75% { -webkit-transform:scale(.8); opacity:.8}
100%{ -webkit-transform:scale(1); opacity:1}
}
@keyframes bounce {
0% { transform:scale(.8); opacity:.8}
25% { transform:scale(.25); opacity:.25}
50% { transform:scale(1.4); opacity:1.4}
75% { transform:scale(.8); opacity:.8}
100%{ transform:scale(1); opacity:1}
}
@-webkit-keyframes bounceout {
0% { -webkit-transform:scale(0)}
25% { -webkit-transform:scale(.8)}
50% { -webkit-transform:scale(1.4)}
75% { -webkit-transform:scale(.25)}
100%{ -webkit-transform:scale(0)}
}
@keyframes bounceout {
0% { transform:scale(0)}
25% { transform:scale(.8)}
50% { transform:scale(1.4)}
75% { transform:scale(.25)}
100%{ transform:scale(0)}
}
Demo 3: Cross Checkbox Animation
In thielast part of the tutorial, we’re going to create a cross checkbox animation using CSS3 with some pseudo elements and CSS3 transition.
The Markup
The markup is just like the first demo; we’ve only changed the question and option data. Check out the markup below.
<ul>
<li>
<input type="checkbox" name="notepad" id="notepad" />
<label for="notepad">Notepad</label>
</li>
<li>
<input type="checkbox" name="sb" id="sb" />
<label for="sb">Sublime Text</label>
</li>
<li>
<input type="checkbox" name="notepad+" id="notepad+" />
<label for="notepad+">Notepad++</label>
</li>
<li>
<input type="checkbox" name="txtmate" id="txtmate" />
<label for="txtmate">TextMate</label>
</li>
<li>
<input type="checkbox" name="scite" id="scite" />
<label for="scite">SciTE</label>
</li>
<li>
<input type="checkbox" name="ke" id="ke" />
<label for="ke">Komodo Edit</label>
</li>
</ul>
Working With the CSS
First, hide the original checkbox and then put some styles on our list of checkbox items. Nothing special here, however we will also add an absolute position after every item using the: after pseudo code.
input[type="checkbox"] {
display:none
}
ul li {
list-style:none;
margin:10px auto;
font-family:'Lato';
position:relative
}
ul li:after {
content:'';
position:absolute;
width:35px;
height:35px;
border:4px solid #fff;
border-radius:6px;
left:-12px;
z-index:-1
}
Let’s move on to the actual label. We’ll set our label to the cursor pointer and then add a CSS3 transition property with duration of 2 seconds and a linear value for the timing function.
label {
cursor:pointer;
color:#c0392b;
margin:5px 0;
padding-left:40px;
position:relative;
font-size:30px;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
-o-transition:.2s linear;
transition:.2s linear
}
For the label before and after pseudo code, we’ll set the line that has a 3px width thick to absolute position.
label:before,label:after {
content:'';
left:11px;
width:3px;
bottom:0;
background:#fcff00;
position:absolute;
top:0
}
For before selector we will rotate these lines by 45 degrees and transform the original position by 14 pixels to the left and right. Notice that I set up also a linear timing function with 2 seconds duration. For the after pseudo code, we’ll set it to -45 degrees to make each line cross each other.
label:before {
transform:rotate(45deg);
transform-origin:0 14px;
height:0;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
-o-transition:.2s linear;
transition:.2s linear
}
label:after {
transform:rotate(-45deg);
transform-origin:0 20px;
height:0;
-webkit-transition:.2s linear .2s;
-moz-transition:.2s linear .2s;
-o-transition:.2s linear .2s;
transition:.2s linear .2s
}
In the final steps, we will target the checkboxes along with the label:after and label:before pseudo code and set the height to 100 percent. This will display the cross line that we’ve created above through the help of the transition property. We will also target the checkbox label text itself and give it a color of white while the cross animation occurs.
input[type="checkbox"]:checked + label:after,input[type="checkbox"]:checked + label:before {
height:100%
}
input[type="checkbox"]:checked + label {
color:#fff
}
Conclusion
CSS3 is really powerful. Using pseudo elements, transitions and animations we have created three beautiful checkboxes that are interactive without the use of JavaScript. Please take note that some browsers, especially older versions of IE, don’t support animation yet. Please refer to this page for more information.
There might be more things to do with CSS3 in the future, so keep up with trends in technology and continue providing great user experience and design to your site visitors.
2 Comments