Webleb - UI Elements - Checkbox / Developer or Designer?

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="switch">
	<label class="switch__label" for="occupation" id="developer">Developer</label>
	<button class="switch__button" type="button" id="occupation" title="Developer or designer?" aria-live="polite" aria-labelledby="developer">
		<svg class="switch__icon" viewBox="0 0 16 16" width="16px" height="16px" aria-hidden="true">
			<g fill="none" stroke="hsl(223,10%,10%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
				<g class="switch__icon1" transform="translate(1,1)">
					<polyline class="switch__icon1-1" points="0 0,6 6" stroke-dasharray="8.49 8.49" />
					<polyline class="switch__icon1-2" points="0 0,0 8.49" stroke-dasharray="8.49 8.49" transform="rotate(-45) translate(0,8.49) rotate(90)" />
					<polyline class="switch__icon1-3" points="0 0,-6 6" stroke-dasharray="16.98 8.49" stroke-dashoffset="16.98" transform="rotate(-12)" />
					<polyline class="switch__icon1-4" points="0 0,0 8.49" stroke-dasharray="8.49 16.98" stroke-dashoffset="16.98" transform="rotate(33) translate(0,8.49) rotate(-57)" />
					<polyline class="switch__icon1-5" points="0 0,0 8" stroke-dasharray="16 8" stroke-dashoffset="16" />
					<circle class="switch__icon1-6" cx="0" cy="8" r="1" stroke-dasharray="6.29 12.57" stroke-dashoffset="12.57" />
				</g>
				<g class="switch__icon2" transform="translate(8,15)">
					<polyline class="switch__icon2-1" points="0 0,7 0" />
					<polyline class="switch__icon2-2" points="0 0,0 4" stroke-dasharray="4 4" stroke-dashoffset="4" />
					<polyline class="switch__icon2-3" points="7 0,7 4" stroke-dasharray="4 4" stroke-dashoffset="4" />
					<polyline class="switch__icon2-4" points="0 0,7 0" />
				</g>
			</g>
		</svg>
	</button>
	<label class="switch__label" for="occupation" id="designer">Designer</label>
</div>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --switch-dev: hsl(223,90%,50%);
  --switch-des: hsl(283,90%,70%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: calc(21px + (120 - 21) * (100vw - 280px) / (3840 - 280));
}

body,
button {
  color: var(--fg);
  font: 1em/1.5 "DM Sans", sans-serif;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
}

.switch {
  display: flex;
  align-items: center;
  margin: auto;
}
.switch__button, .switch__icon {
  display: block;
}
.switch__button, .switch__label {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch__button {
  background-color: var(--switch-dev);
  border-radius: 0.5em;
  box-shadow: 0 -0.0625em 0 hsl(var(--hue), 10%, 80%), 0 0.0625em 0 white;
  position: relative;
  width: 3em;
  height: 1.5em;
  transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur);
  -webkit-appearance: none;
  appearance: none;
}
.switch__button:before {
  background-color: white;
  border-radius: 0.25em;
  box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.2);
  content: "";
  display: block;
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1em;
  height: 1em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
[dir=rtl] .switch__button:before {
  right: 0.25em;
  left: auto;
}
.switch__button[aria-labelledby=designer] {
  background-color: var(--switch-des);
}
.switch__icon {
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 0.5em;
  height: 0.5em;
}
[dir=rtl] .switch__icon {
  right: 0.5em;
  left: auto;
}
.switch__icon,
.switch__icon circle,
.switch__icon g,
.switch__icon polyline {
  transition: stroke-dashoffset var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing);
}
.switch__icon1 {
  transform: translate(1px, 1px);
}
.switch__icon1-2 {
  transform: rotate(-45deg) translate(0, 8.49px) rotate(90deg);
}
.switch__icon2 {
  transform: translate(8px, 15px);
}
.switch__button[aria-labelledby=designer] .switch__icon, .switch__button[aria-labelledby=designer]:before {
  transform: translateX(1.5em);
}
[dir=rtl] .switch__button[aria-labelledby=designer] .switch__icon, [dir=rtl] .switch__button[aria-labelledby=designer]:before {
  transform: translateX(-1.5em);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1 {
  transform: translate(1px, 1px) rotate(-45deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-1, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-3, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-4, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-5, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-6 {
  stroke-dashoffset: 0;
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-1 {
  transform: rotate(12deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-2, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-4 {
  stroke-dashoffset: 2.82;
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon1-2 {
  transform: rotate(-33deg) translate(0, 8.49px) rotate(57deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2 {
  transform: translate(7px, 12px) rotate(-45deg);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-1 {
  transform: translateY(4px);
}
.switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-2, .switch__button[aria-labelledby=designer] .switch__icon .switch__icon2-3 {
  stroke-dashoffset: 0;
}
.switch__label {
  font-size: 0.75em;
  line-height: 2;
  padding-inline-end: 0.75em;
}
.switch__label ~ .switch__label {
  padding-inline: 0.75em 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }

.switch__button {
    box-shadow: 0 -0.0625em 0 black, 0 0.0625em 0 hsl(var(--hue), 10%, 20%);
  }
}

Checkbox / Developer or Designer?

Recommended

Holographic Portfolio Website HTML Template

Developer Portfolio HTML Template

Sign In Form

HTML

CSS

JS

Recommended

Holographic Portfolio Website HTML Template

Developer Portfolio HTML Template

Sign In Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS