Stylish Lock Icon Checkbox Using HTML and CSS (Free Source Code)
The modern Stylish Lock Icon Checkbox using HTML and CSS functions as a secure design element for websites. I am delivering source code to you without charge while ensuring the code implements proper programming standards for successful application in coding projects that range from beginner level to advanced sites.
A lock icon replaces traditional checkbox boxes to deliver a different user interface component suitable for web components and UI elements.
This component works as a straightforward powerful element that suits both novices coding projects and advanced Open-Source UI projects.
GitHub Source: Stylish Lock Icon Checkbox
Features
- Eye-Catching Design: The lock icon smoothly transitions between locked and unlocked states, providing clear visual feedback.
- Lightweight Code: Built entirely with HTML and CSS, ensuring minimal load on your website.
- Easy Integration: You can place it in forms, settings panels, or other web components without major layout changes.
- Customizable Colors: Adjust the background and stroke colors to match your website’s branding.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Interactive Burger Menu Checkbox
- Multi-Ring Circular Loader
- Animated Pencil Loader
- 12-Dot Circular Loader
- Modern Circular Radar Loader
Steps to Build Website Checkbox
The integration of this component to your website requires taking HTML code from your webpage source and CSS code from your style sheet.
Change dimensions as well as select colors together with animation speed for optimal design fit. You can find the HTML and CSS code below which needs pasting into your projects’ respective files. The simple implementation process allows beginners to coding and easily integrate this element.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Developed by Shokat Javed available at www.jvcodes.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Lock Icon Checkbox - JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="inpLock" type="checkbox">
<label class="btn-lock" for="inpLock">
<svg width="36" height="40" viewBox="0 0 36 40">
<path class="lockb" d="M27 27C27 34.1797 21.1797 40 14 40C6.8203 40 1 34.1797 1 27C1 19.8203 6.8203 14 14 14C21.1797 14 27 19.8203 27 27ZM15.6298 26.5191C16.4544 25.9845 17 25.056 17 24C17 22.3431 15.6569 21 14 21C12.3431 21 11 22.3431 11 24C11 25.056 11.5456 25.9845 12.3702 26.5191L11 32H17L15.6298 26.5191Z"></path>
<path class="lock" d="M6 21V10C6 5.58172 9.58172 2 14 2V2C18.4183 2 22 5.58172 22 10V21"></path>
<path class="bling" d="M29 20L31 22"></path>
<path class="bling" d="M31.5 15H34.5"></path>
<path class="bling" d="M29 10L31 8"></path>
</svg>
</label>
</body>
</html>
CSS
Here is the complete code for style.css file to style the checkbox:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #383838;
}
.btn-lock {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
display: inline-block;
background: #ff5b5b;
width: 64px;
height: 64px;
box-sizing: border-box;
padding: 12px 0 0 18px;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.btn-lock svg {
fill: none;
transform: translate3d(0, 0, 0);
}
.btn-lock svg .bling {
stroke: #fff;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 3;
stroke-dashoffset: 15;
transition: all 0.3s ease;
}
.btn-lock svg .lock {
stroke: #fff;
stroke-width: 4;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 36;
transition: all 0.4s ease;
}
.btn-lock svg .lockb {
fill: #fff;
fill-rule: evenodd;
clip-rule: evenodd;
transform: rotate(8deg);
transform-origin: 14px 20px;
transition: all 0.2s ease;
}
#inpLock {
display: none;
}
#inpLock:checked + label {
background: #20cca5;
}
#inpLock:checked + label svg {
opacity: 1;
}
#inpLock:checked + label svg .bling {
animation: bling6132 0.3s linear forwards;
animation-delay: 0.2s;
}
#inpLock:checked + label svg .lock {
stroke-dasharray: 48;
animation: locked 0.3s linear forwards;
}
#inpLock:checked + label svg .lockb {
transform: rotate(0);
transform-origin: 14px 22px;
}
@keyframes bling6132 {
50% {
stroke-dasharray: 3;
stroke-dashoffset: 12;
}
100% {
stroke-dasharray: 3;
stroke-dashoffset: 9;
}
}
@keyframes locked {
50% {
transform: translateY(1px);
}
}
Download Source Code
The free source code is available through the provided button without any copyrights applied. The source code is available for both personal and commercial project usage without any restrictions.
Conclusion
The code enables you to add attractive security features to your settings which instantly enhances the look and feel of your user experience and portfolio presentation.
JV Source Codes requires proper credit through linking back to their site in addition to YouTube subscription and evaluation of their other elements including forms, cards, galleries, menus, footer and herosection. Contact me through comments if you have questions or encounter difficulties since I will be pleased to help.
