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

Perfil de Links Sociais

Exemplo de formulário de login em HTML

HTML

CSS

JS

Recomendado

Perfil de Links Sociais

Exemplo de formulário de login em HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS