Pure CSS checkboxes with one element

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

HTML

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

The 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