Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Animating HTML Checkboxes with Selection Effect

Written by @kerixa 4 April 2021

The use of checkboxes in pricing plans and forms that users usually work with is common. Giving a special style to these checkboxes will make your website forms more beautiful. In the following code, an animation is executed when each checkbox is selected and the color of the checkbox changes to yellow. This effect is suitable for dark theme websites.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap");

body {
    color: #949494;
    font-family: "Montserrat", sans-serif;
    background: #222;
    height: 100vh;
    margin: 0;
}

h1 {
    color: #fff;
    font-family: "Arvo", serif;
    padding: 20px ;
    font-size: 18px;
    line-height: 18px;
    margin: 5px 0;
    text-align: center;
}

h2.section-heading {
    background: #ad0377;
    color: #fff;
    font-family: "Arvo", serif;
    padding: 15px ;
    font-size: 18px;
    line-height: 34px;
    margin: 15px 0;
}

.container {
    padding-bottom: 50px;
}

.control-group {
    margin-left: 50px;
    margin-bottom: 25px;
}

.control-group label {
    padding-left: 36px;
    position: relative;
}

.control-group label::before,
.control-group label::after {
    position: absolute;
    display: inline-block;
}

.control-group input[type="checkbox"] {
    opacity: 0;
}

.control-group label::before {
    content: "";
    border: 4px solid #4a4949;
    border-radius: 8px;
    width: 19px;
    height: 20px;
    left: 0;
    top: -4px;
}

.control-group label::after {
    color: #ffff00;
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    top: 4px;
    left: 7px;
}

.control-group input[type="checkbox"] + label::before {
    animation-name: uncheckedJiggle;
    animation-duration: 700ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: uncheckedJiggle;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

.control-group input[type="checkbox"] + label::after {
    content: none;
}

.control-group input[type="checkbox"]:checked + label::before {
    border-color: #ffff00;
    box-shadow: 0 0 20px 0 #8f6e01;
    animation-name: jiggle;
    animation-duration: 700ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: jiggle;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

.control-group input[type="checkbox"]:checked + label::after {
    content: "\f00c";
    animation-name: innerJiggle;
    animation-duration: 700ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: innerJiggle;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

@keyframes jiggle {
0% {
    transform: scale(0.8, 0.8);
}

30% {
    transform: scale(0.75, 1.15);
}

50% {
    transform: scale(1.12, 0.75);
}

60% {
    transform: scale(0.9, 1.12);
}

70% {
    transform: scale(1.05, 0.95);
}

80% {
    transform: scale(0.85, 1.05);
}

90% {
    transform: scale(1.02, 0.98);
}

95% {
    transform: scale(0.98, 1.02);
}

98% {
    transform: scale(1.01, 0.99);
}

100% {
    transform: scale(1, 1);
}
}

@-webkit-keyframes jiggle {
0% {
    -webkit-transform: scale(0.8, 0.8);
}

30% {
    -webkit-transform: scale(0.75, 1.15);
}

50% {
    -webkit-transform: scale(1.12, 0.75);
}

60% {
    -webkit-transform: scale(0.9, 1.12);
}

70% {
    -webkit-transform: scale(1.05, 0.95);
}

80% {
    -webkit-transform: scale(0.85, 1.05);
}

90% {
    -webkit-transform: scale(1.02, 0.98);
}

95% {
    -webkit-transform: scale(0.98, 1.02);
}

98% {
    -webkit-transform: scale(1.01, 0.99);
}

100% {
    -webkit-transform: scale(1, 1);
}
}

@keyframes uncheckedJiggle {
0% {
    transform: scale(0.8, 0.8);
}

30% {
    transform: scale(0.75, 1.15);
}

50% {
    transform: scale(1.12, 0.75);
}

60% {
    transform: scale(0.9, 1.12);
}

70% {
    transform: scale(1.05, 0.95);
}

80% {
    transform: scale(0.85, 1.05);
}

90% {
    transform: scale(1.02, 0.98);
}

95% {
    transform: scale(0.98, 1.02);
}

98% {
    transform: scale(1.01, 0.99);
}

100% {
    transform: scale(1, 1);
}
}

@-webkit-keyframes uncheckedJiggle {
0% {
    -webkit-transform: scale(0.8, 0.8);
}

30% {
    -webkit-transform: scale(0.75, 1.15);
}

50% {
    -webkit-transform: scale(1.12, 0.75);
}

60% {
    -webkit-transform: scale(0.9, 1.12);
}

70% {
    -webkit-transform: scale(1.05, 0.95);
}

80% {
    -webkit-transform: scale(0.85, 1.05);
}

90% {
    -webkit-transform: scale(1.02, 0.98);
}

95% {
    -webkit-transform: scale(0.98, 1.02);
}

98% {
    -webkit-transform: scale(1.01, 0.99);
}

100% {
    -webkit-transform: scale(1, 1);
}
}

@keyframes innerJiggle {
0% {
    transform: scale(0.8, 0.8);
}

30% {
    transform: scale(0.75, 1.15);
}

50% {
    transform: scale(1.12, 0.75);
}

60% {
    transform: scale(0.9, 1.12);
}

70% {
    transform: scale(1.05, 0.95);
}

80% {
    transform: scale(0.85, 1.05);
}

90% {
    transform: scale(1.02, 0.98);
}

95% {
    transform: scale(0.98, 1.02);
}

98% {
    transform: scale(1.01, 0.99);
}

100% {
    transform: scale(1, 1);
}
}

@-webkit-keyframes innerJiggle {
0% {
    -webkit-transform: scale(0.8, 0.8);
}

30% {
    -webkit-transform: scale(0.75, 1.15);
}

50% {
    -webkit-transform: scale(1.12, 0.75);
}

60% {
    -webkit-transform: scale(0.9, 1.12);
}

70% {
    -webkit-transform: scale(1.05, 0.95);
}

80% {
    -webkit-transform: scale(0.85, 1.05);
}

90% {
    -webkit-transform: scale(1.02, 0.98);
}

95% {
    -webkit-transform: scale(0.98, 1.02);
}

98% {
    -webkit-transform: scale(1.01, 0.99);
}

100% {
    -webkit-transform: scale(1, 1);
}
}

@keyframes compress {
0% {
    transform: scale(1, 1);
}

100% {
    transform: scale(0.8, 0.8);
}
}

@-webkit-keyframes compress {
0% {
    -webkit-transform: scale(1, 1);
}

100% {
    -webkit-transform: scale(0.8, 0.8);
}
}
</style>
<h2 class="section-heading">Select your pizza toppings</h2>

<div class="container">
  <div class="control-group">
    <input id="pepperoni-topping" type="checkbox" name="toppings[]" value="pepperoni" />
    <label for="pepperoni-topping" class="jiggle-label">Pepperoni</label>
  </div>

  <div class="control-group">
    <input id="bacon-topping" type="checkbox" name="toppings[]" value="bacon" />
    <label for="bacon-topping" class="jiggle-label">Bacon</label>
  </div>

  <div class="control-group">
    <input id="green-pepper-topping" type="checkbox" name="toppings[]" value="green_pepper" />
    <label for="green-pepper-topping" class="jiggle-label">Green Peppers</label>
  </div>

  <div class="control-group">
    <input id="onion-topping" type="checkbox" name="toppings[]" value="onion" />
    <label for="onion-topping" class="jiggle-label">White Onion</label>
  </div>
</div><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2