Switch by aymenthedeveloper
#e8e8e8
1.toggle-btn { 2 --bg: #e8e8e8; 3 --fg: #212121; 4 background-color: var(--bg); 5 border-radius: 10px; 6 --dimensions: 50px; 7 width: var(--dimensions); 8 height: var(--dimensions); 9 border: none; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 margin: 0; 14 padding: 0; 15 cursor: pointer; 16} 17 18.toggle-btn .main-circle { 19 --dimensions: 20px; 20 width: var(--dimensions); 21 height: var(--dimensions); 22 background-color: var(--fg); 23 border-radius: 50%; 24 position: absolute; 25 transition: transform 0.4s ease 0.2s; 26} 27 28.toggle-btn .main-circle::after { 29 content: ""; 30 background-color: var(--bg); 31 border-radius: 50%; 32 --dimensions: 15px; 33 width: var(--dimensions); 34 height: var(--dimensions); 35 position: absolute; 36 top: 1px; 37 right: -1px; 38 transform-origin: right top; 39 transform: scale(0); 40 transition: transform 0.4s ease 0.2s; 41} 42 43.toggle-btn .sun-rays { 44 display: grid; 45 place-items: center; 46 transition: transform 0.4s ease 0.2s; 47} 48 49.toggle-btn .sun-rays, 50.toggle-btn .sun-rays::after, 51.toggle-btn .sun-rays::before { 52 --width: 3px; 53 --height: 6px; 54 width: var(--width); 55 height: var(--height); 56 background-color: var(--fg); 57 position: absolute; 58 box-shadow: 0 16px 0 var(--fg), 0 -16px 0 var(--fg); 59} 60 61.toggle-btn .sun-rays::after { 62 content: ""; 63 transform: rotate(120deg); 64} 65 66.toggle-btn .sun-rays::before { 67 content: ""; 68 transform: rotate(240deg); 69} 70 71.toggle-btn:focus .main-circle { 72 transform: scale(1.2); 73} 74 75.toggle-btn:focus .main-circle::after { 76 transform: scale(1); 77} 78 79.toggle-btn:focus .sun-rays { 80 transition: transform 0.4s; 81 transform: scale(0); 82} 83 84@media (prefers-color-scheme: dark) { 85 .toggle-btn { 86 --bg: #212121; 87 --fg: #e8e8e8; 88 } 89} 90
134 views
134 views
MIT License