Pure CSS checkboxes with one element

July 27, 2021

Updated on June 13, 2024

css, html-tutorials, tricks-and-tips

Pure CSS checkboxes with one element

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.

HTML

html
<input type="checkbox" data-name="Item 3" class="checkbox" />

The CSS

css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
.checkbox {
appearance: none;
height: 100px;
width: 100px;
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(37, 145, 251, 0.98) 0.1%,
rgba(0, 7, 128, 1) 99.8%
);
background-size: 360% 100%;
border-radius: 4px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.checkbox:after {
content: attr(data-name);
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-family: 'Inter', sans-serif;
color: #3f3f3f;
z-index: 99;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.checkbox:before {
content: '';
position: absolute;
top: 0%;
left: 0px;
height: 200%;
width: 200%;
background: #e9e9e9;
z-index: 0;
transition: all 0.2s linear;
transform: scale(0.6) translate(-50%, -50%);
}
.checkbox:hover:before,
.checkbox:focus-visible:before {
background: #cacaca;
top: -4%;
left: 20%;
}
.checkbox:checked:before {
opacity: 0;
transform: scale(0.9);
}
.checkbox:checked:after {
color: white;
}
.checkbox:checked {
box-shadow: 0px 4px 10px -6px black;
}
.checkbox:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 5px #480f5d;
}

The result

Found a spelling error or something wrong with this article? Edit this page on GitHub and make a PR!

Comments

Related Posts