Custom Checkbox Design using only HTML & CSS | Toggle Switch On/Off
Hello readers, Today in this blog you’ll learn how to create Custom Checkbox or Toggle Switch using only HTML & CSS.
A checkbox, selection box, or tick box is a small interactive box that can be toggled by the user to show an affirmative or negative choice. And a toggle button lets the user change a setting between two states.
In this program (Custom Checkbox or Toggle Switch), on the webpage, there is a toggle switch and a text labeled as “Disabled”. When you click on that toggle switch or checkbox, the toggle switch or checkbox is on, enabled, or checked and the text is also changed into “Enabled”. When the toggle switch is on, the background color of the toggle and the color of the text is also changed.You can also on/off the switch of the toggle by clicking on the label text and this is a pure CSS program, which means I used only HTML & CSS to create this toggle switch. You can watch a full video tutorial on this program (Custom Checkbox or Toggle Switch).
If you’re feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.
HTML
<!DOCTYPE html>
<!-- Created By Praveen Kumar -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Custom Toggle Button | VikashTech</title> -->
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="click">
<label for="click" class="text"></label>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
.checkbox{
height: 80px;
width: 270px;
padding: 20px;
display: flex;
background: #fff;
align-items: center;
border-radius: 5px;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
justify-content: space-between;
}
.checkbox input{
outline: none;
height: 40px;
width: 90px;
border-radius: 50px;
-webkit-appearance: none;
position: relative;
background: #e6e6e6;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.checkbox input:checked{
background: #664AFF;
}
.checkbox input:before{
position: absolute;
content: "";
left: 0;
height: 100%;
width: 40px;
background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
border-radius: 50px;
transform: scale(0.85);
transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked:before{
left: 50px;
}
.checkbox .text:before{
content: "Disabled";
font-size: 25px;
font-weight: 500;
color: #bfbfbf;
}
input:checked ~ .text:before{
color: #664AFF;
font-size: 27px;
content: "Enabled";
}
- By Praveen Kumar
- January 15, 2021 3:48 pm
- 0
- Tags: beautiful checkbox, checkbox
Comments
Leave a Reply
Latest Posts
How to send message via Telegram Bot using PHP - Telegram API
Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…
SuiteCRM, an open source tool for startups to use from an early stage.
When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…
How to Implement Google QAuth Authentication | Google Login - PHP MySQL
PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…
How to use Google Two Factor Authentication in your project?
At our end we take security at a priority, implementation of different ways to secure website should be the priority…
