Dark and light button

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WEB BEKS</title>
  <link rel="stylesheet" href="style (13).css">
  <style>
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <svg display="none">
    <symbol id="light" viewBox="0 0 24 24">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(0,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(45,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(90,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(135,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(180,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(225,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(270,12,12)" />
        <line x1="12" y1="17" x2="12" y2="20" transform="rotate(315,12,12)" />
      </g>
      <circle fill="currentColor" cx="12" cy="12" r="5" />
    </symbol>
    <symbol id="dark" viewBox="0 0 24 24">
      <path fill="currentColor" d="M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z" />
    </symbol>
  </svg>
  <label class="switch">
    <input class="switch__input" type="checkbox" role="switch" name="dark" />
    <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
      <use href="#light" />
    </svg>
    <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
      <use href="#dark" />
    </svg>
    <span class="switch__inner"></span>
    <span class="switch__inner-icons">
      <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
        <use href="#light" />
      </svg>
      <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
        <use href="#dark" />
      </svg>
    </span>
    <span class="switch__sr">Dark Mode</span>
  </label>
</body>

CSS

*{
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root{
	--hue: 533;
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.2s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
}
body,
input{
	font: 1em/1.5 sans-serif;
}
body{
	background-color: hsl(var(--hue),10%,90%);
	color: hsl(var(--hue),10%,10%);
	display: flex;
	height: 100vh;
	transition: background-color var(--trans-dur), color var(--trans-dur);
}
body:has(.switch__input:checked){
	background-color: hsl(var(--hue),10%,20%);
	color: hsl(var(--hue),10%,90%);
}
.switch,
.switch__input{
	display: block;
	-webkit-tap-highlight-color: transparent;
}
.switch{
	margin: auto;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.switch__icon{
	color: hsla(var(--hue),10%,80%);
	pointer-events: none;
	position: absolute;
	top: 0.375em;
	left: 0.375em;
	width: 0.75em;
	height: 0.75em;
	transition:
		color var(--trans-dur),
		transform var(--trans-dur) var(--trans-timing);
}
.switch__icon:nth-of-type(2){
	right: 0.375em;
	left: auto;
}
.switch__inner,
.switch__inner-icons{
	border-radius: 0.5em;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 2.25em;
	height: 1em;
}
.switch__inner:before,
.switch__inner-icons{
	transition: transform var(--trans-dur) var(--trans-timing);
	transform: translateX(-1.25em);
}
.switch__inner:before{
  background-color: var(--primary);
	border-radius: inherit;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.switch__inner-icons{
	pointer-events: none;
}
.switch__inner-icons .switch__icon{
	color: hsl(0,0%,100%);
	top: 0.125em;
	left: 0.125em;
	transform: translateX(1.25em);
}
.switch__inner-icons .switch__icon:nth-child(2){
	right: 0.125em;
	left: auto;
}
.switch__input{
	background-color: hsl(0,0%,100%);
	border-radius: 0.75em;
	box-shadow: 0 0 0 0.0625em hsla(var(--hue),90%,50%,0), 0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
	outline: transparent;
	width: 2.75em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--trans-dur), box-shadow var(--trans-dur);
} 
.switch__input:checked{
	background-color: hsl(var(--hue),10%,10%);
}
.switch__input:checked ~ .switch__icon{
	color: hsla(var(--hue),10%,40%);
}
.switch__input:checked ~ .switch__inner:before,
.switch__input:checked ~ .switch__inner-icons{
	transform: translateX(1.25em);
}
.switch__input:not(:checked) ~ .switch__icon:first-of-type,
.switch__input:checked ~ .switch__icon:nth-of-type(2) {
	transform: rotate(360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type{
	transform: translateX(-1.25em) rotate(-360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2){
	transform: translateX(-1.25em) rotate(360deg);
}
.switch__input:focus-visible{
	box-shadow: 0 0 0 0.0625em hsla(var(--hue),90%,50%,1), 0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
}
.switch__sr{
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}

Dark and light button

Recommended

Dark Mode Website Footer HTML CSS Code

HTML Next Button with SVG Arrow

Multi Step Form with Progress Bar using jQuery and CSS3

HTML

CSS

JS

Recommended

Dark Mode Website Footer HTML CSS Code

HTML Next Button with SVG Arrow

Multi Step Form with Progress Bar using jQuery and CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS