Webleb - Snippets de Código -

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%);
  }
}

Recomendado

Animação da barra de carregamento CSS

Efeito Gaveta

Site do planejador de datas

HTML

CSS

JS

Recomendado

Animação da barra de carregamento CSS

Efeito Gaveta

Site do planejador de datas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS