Responsive Diamond Checkbox Design Using HTML and CSS (Free Source Code)
The modern web element known as Responsive Diamond Checkbox Design Using HTML and CSS combines traditional checkboxes with a unique diamond shape.
You can obtain the free source code from me based on good programming principles suitable for beginner-level coding ventures and professional development work.
GitHub Source: Responsive Diamond Checkbox Design
Features of Responsive Diamond Checkbox Design
- Accessibility-Friendly: Includes ARIA labels for improved screen reader support.
- Fully Responsive: Adapts smoothly to all screen sizes, from desktops to mobile devices.
- Custom Styling: Uses CSS transforms and transitions for a sleek diamond shape with hover effects.
- Cross-Browser Compatible: Works seamlessly on Chrome, Firefox, Safari, and Edge.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- iOS Checkbox Design for Websites
- Neumorphic Round Checkbox
- Animated Heart Checkbox
- Stylish Lock Icon Checkbox
- Interactive Burger Menu Checkbox
Steps to Build Website Checkbox
This checkbox can be constructed by adding the given HTML code to your webpage and placing the CSS within your stylesheet. Modify design features regarding color schemes together with dimensions and spacing elements to match your website design. The plug-and-play functionality makes it easy for developers to implement the Responsive Diamond Checkbox Design through simple coding.
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>Responsive Diamond Checkbox Design - JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="checkbox-wrapper-16">
<label class="checkbox-wrapper">
<input class="checkbox-input" type="checkbox">
<span class="checkbox-tile">
<span class="checkbox-icon">
<svg viewBox="0 0 256 256" fill="currentColor" height="192" width="192" xmlns="http://www.w3.org/2000/svg">
<rect fill="none" height="256" width="256"></rect>
<polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="72 40 184 40 240 104 128 224 16 104 72 40"></polygon>
<polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="177.091 104 128 224 78.909 104 128 40 177.091 104"></polygon>
<line stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" y2="104" x2="240" y1="104" x1="16"></line>
</svg>
</span>
<span class="checkbox-label">Sketch</span>
</span>
</label>
</div>
</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;
}
.checkbox-wrapper-16 *,
.checkbox-wrapper-16 *:after,
.checkbox-wrapper-16 *:before {
box-sizing: border-box;
}
.checkbox-wrapper-16 .checkbox-input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
border-color: #2260ff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #2260ff;
}
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
transform: scale(1);
opacity: 1;
background-color: #2260ff;
border-color: #2260ff;
}
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
color: #2260ff;
}
.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
border-color: #2260ff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
transform: scale(1);
opacity: 1;
}
.checkbox-wrapper-16 .checkbox-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 7rem;
min-height: 7rem;
border-radius: 0.5rem;
border: 2px solid #b5bfd9;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transition: 0.15s ease;
cursor: pointer;
position: relative;
}
.checkbox-wrapper-16 .checkbox-tile:before {
content: "";
position: absolute;
display: block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #b5bfd9;
background-color: #fff;
border-radius: 50%;
top: 0.25rem;
left: 0.25rem;
opacity: 0;
transform: scale(0);
transition: 0.25s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 12px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.checkbox-wrapper-16 .checkbox-tile:hover {
border-color: #2260ff;
}
.checkbox-wrapper-16 .checkbox-tile:hover:before {
transform: scale(1);
opacity: 1;
}
.checkbox-wrapper-16 .checkbox-icon {
transition: 0.375s ease;
color: #494949;
}
.checkbox-wrapper-16 .checkbox-icon svg {
width: 3rem;
height: 3rem;
}
.checkbox-wrapper-16 .checkbox-label {
color: #707070;
transition: 0.375s ease;
text-align: center;
}
Download Source Code
This diamond checkbox source code is downloadable through the provided button while retaining no copyrights. This design element is available to all users whether private or commercial for modification and implementation into their projects.
Conclusion
This code lets you enhance your website collection and attract users through modern stylish user interface elements.
All credit goes to JV Source Codes so please link back while you subscribe to our YouTube channel for additional free resources and check out our other design options which include forms and cards.
Please feel free to post any queries through comments since I will answer them personally.
