Learn how to create an animated checkbox with HTML and CSS in this step-by-step tutorial. Enhance your website's user experience with this simple yet effective feature.
Table of Contents
An animated checkbox is a checkbox element on a website that is enhanced with CSS animation. It provides a more engaging user experience and adds a touch of creativity to the design. When a user clicks on an animated checkbox, it may change its appearance or behavior, providing feedback and making the user experience more interactive.
Adding an animated checkbox to a website can improve its overall user experience by making it more interactive and engaging. It can also help to draw the user's attention to important information or actions on the website. Furthermore, an animated checkbox can be used to provide feedback to the user, giving them a clear indication that their action has been registered. In short, an animated checkbox is a simple yet effective way to enhance a website's design and functionality. In the following sections, we will guide you through the process of creating an animated checkbox with HTML and CSS.
Let's start making an animated checkbox using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our checkbox.
Let's break down the code step by step.
The first line <!DOCTYPE html> is a declaration indicating that the document is an HTML5 document.
The html tag with the attribute lang="en" indicates that the document's language is English.
The head element contains information about the document such as the document's title, character encoding, and stylesheets.
The title element defines the title of the document which appears in the browser's title bar.
The meta elements provide additional information about the document. The first meta element sets the character encoding to UTF-8, which allows the document to display special characters such as accented letters. The second meta element sets the width of the viewport to the width of the device.
The link elements provide links to external resources used by the document. The first link element links to a font awesome stylesheet which provides the arrow icon used in the checkbox. The second link element links to a custom stylesheet named "styles.css" which contains the styles for the checkbox.
The body element contains the content of the web page. In this case, it contains an input element of type checkbox, with a name attribute of "checkbox", an id attribute of "input-toggle", and a class attribute of "input-toggle". This checkbox serves as the switch to toggle the checkbox animation.
The div element with a class attribute of "checkbox__container" contains the label for the checkbox. The label element with a for attribute of "input-toggle" is associated with the checkbox by its id attribute. The label serves as the wrapper for the checkbox with the arrow icon inside it. The span element with a class attribute of "ball arrow" contains the arrow icon created by the i element with a class attribute of "fas fa-arrow-right". The span and i elements are nested inside the label element.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our checkbox using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the checkbox is in place, the next step is to add styling to the checkbox using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our checkbox animation.
The first few lines of the code are used to reset the default margins and padding of all HTML elements and apply the box-sizing property to ensure consistent sizing across all elements.
The body element is set to display flex and align and justify its content in the center. The height of the body is set to 100vh and the background color is a light gray.
The :root selector sets variables for the dimensions of the checkbox element, including the container size, height of the container, and the size of the ball element within it.
The appearance of the default checkbox is removed using the attribute selector [type="checkbox"]. The container element for the checkbox is set to display as a grid with dimensions and styles defined by the previously set variables. The container background color is defined as a gradient of two colors.
The label element for the checkbox is set to have a pointer cursor and a border with a shadow effect. The ball element within the container is set to be positioned absolutely, with a left offset of 0.5rem and centered vertically. It is also given a gradient background and a shadow effect.
The ball element is set to rotate 540 degrees and move to the right when the checkbox is checked using the :checked pseudo-class selector. This creates the animation effect of the ball moving from left to right when the checkbox is clicked.
This will give our checkbox an upgraded presentation.Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: hsl(188deg 3% 83%);
}
:root {
--container: 16rem;
--height: 5.125rem;
--ball: 4.25rem;
}
[type="checkbox"] {
appearance: none;
display: none;
}
.checkbox__container {
transform: scale(1.2);
display: grid;
inline-size: var(--container);
block-size: var(--height);
border-radius: 100vh;
background: linear-gradient(45deg, hsl(39, 100%, 80%), hsl(300, 47%, 85%));
position: relative;
box-shadow: 0px 1.9px 3.2px rgba(0, 0, 0, 0.25);
outline: 1px solid hsl(0, 0%, 60%, 0.2);
}
.label-for-toggle {
cursor: pointer;
isolation: isolate;
display: grid;
place-content: center start;
width: inherit;
border-radius: inherit;
border: 16px solid hsl(200, 0%, 100%, 0.825);
box-shadow: 0 2px 2px 1px #0003 inset, inset 0 -1px 1.5px 1px #fff7;
}
.ball {
place-self: center start;
position: absolute;
left: 0.5rem;
mix-blend-mode: color;
display: grid;
place-content: center;
width: var(--ball);
aspect-ratio: 1;
background: linear-gradient(135deg, #3ddbd9, #8da2ec, #fe95ff);
border-radius: 50%;
transition: transform 500ms cubic-bezier(0.4, 0.47, 0.66, 0.86);
box-shadow: 0 0 0.75rem 0 #0004;
}
.ball i {
font-size: 2.5em;
color: #fff;
-webkit-text-stroke: 1px #0006;
}
:checked ~ .checkbox__container .ball {
transform: translateX(calc(var(--container) - var(--ball) - 1rem))
rotate(540deg);
} Final Output:
Conclusion:
In conclusion, an animated checkbox is a simple yet effective way to add creativity and interactivity to a website. It provides a more engaging user experience and can help draw attention to important information or actions on the website. By using HTML and CSS, creating an animated checkbox is a relatively straightforward process, even for beginners.
Throughout this tutorial, we have covered the basics of creating an HTML checkbox, styling it with CSS, and adding animation effects to it. By following these step-by-step instructions, you should now have a better understanding of how to create an animated checkbox on your own.
While we have focused on creating a simple animated checkbox, the possibilities are endless when it comes to customization and design. By experimenting with different CSS animation properties and styles, you can create unique and engaging animated checkboxes that will add a professional touch to your website.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
