Send Me Something Special to my channel Subscribe
Home
csscheckbox
customcheckbox

How to Create a Custom Checkbox with PURE CSS - HTML & CSS Tutorial


Learn how to create these fancy custom checkbox form elements with pure CSS! We also add a bit of animation to make our checkboxes animate by using the transition properties. The source files will be uploaded on my blog as always.
Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>custom checkbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="check" class="switch">
<input type="checkbox" name="check" id="check">
<span></span>
</label>
<label for="checked" class="switch">
<input type="checkbox" name="checked" id="checked" checked>
<span></span>
</label>
</body>
</html>


                                                                    Css Code:


body{
    --bg: #262730;
    --line: #505162;
    --dot: #d6d6d6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg);
}
input {
    display: none;
}
.switch {
    position: relative;
    height: 4px;
    width: 50px;
    background: var(--line);
    border-radius: 20px;
    cursor: pointer;
    margin: 1.8rem 0;
}

.switch span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-120%,-50%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 4px solid var(--dot);
    box-shadow: inset 0 0 0 4px var(--bg);
    transition: all .5s ease-out;
}

input:checked ~ span {
    background: var(--dot);
    transform: translate(20%,-50%);
    box-shadow: none;
}
PLEASE SUBSCRIBE! 💝 https://www.youtube.com/c/codeopacity New Videos Every Week ------------------------------------- 🎵Music credits: Vlog No Copyright: https://www.youtube.com/channel/UCEic... Audio Library: https://www.youtube.com/channel/UCht8... -------------------------------------- SOCIAL: Instagram: https://www.instagram.com/codeopacity/ Twitter: https://twitter.com/OpacityCode Website: https://rrr2021.netlify.app/ Blog: https://opacitycode.blogspot.com/ Facebook: https://www.facebook.com/alpha.code.0 Thanks for your support!

Post a Comment

© ‧ Code Opacity. All rights reserved. Distributed by ASThemesWorld