Bouton sombre et clair

2,218 AmirAliAkrami

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 April 2024

Bouton bascule HTML CSS

21 July 2025

Menu de navigation des boutons radio CSS

26 June 2024

Bouton de médias sociaux multiples

HTML

<!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;
}