Changing the icon |
Changing the icon |
abody |
Mar 24 2022, 11:08 PM
Post
#1
|
Group: Members Posts: 1 Joined: 24-March 22 Member No.: 28,296 |
Hey, I want to change the icon from toggle button to moon icon how ?
so please help me and thanks HTML: CODE <div class="Switchbtn"> <span class="nightly">Night Mode</span> <input class="togglenight togglenight-switch" id="nightmode" type="checkbox"> <label class="togglenight-btn" for="nightmode"></label></div> CSS: CODE .Switchbtn { position: fixed; text-align: center; display: inline-block; align-items: center; z-index: 100; right: 20px; top: 20px } .togglenight { display: none; } .togglenight + .togglenight-btn { outline: 0; display: inline-block; width: 45px; height: 10px; position: relative; cursor: pointer; margin-left: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100% } .togglenight-switch + .togglenight-btn { background: #d5d2fc; border-radius: 99em; transition: all .4s ease } .togglenight-switch + .togglenight-btn:after { content: ''; border-radius: 100px; background: #887fff; transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease; position: absolute; width: 20px; height: 20px; top: -5px; left: 0; box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23) } .togglenight-switch:checked + .togglenight-btn { background: rgba(255,255,255,.15) } |
Christian J |
Mar 25 2022, 10:03 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Hey, I want to change the icon from toggle button to moon icon how ? Seems the toggle button icon is created entirely with CSS. It's much easier to make the moon icon with an ordinary image: CSS: CODE #label { display: inline-block; width: 20px; height: 20px; cursor: pointer; background: url(day.gif) no-repeat; } #toggle {display: none;} #toggle:checked ~ #label {background: url(night.gif) no-repeat;} HTML: CODE <input type="checkbox" id="toggle"> <label id="label" for="toggle"></label> |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:35 AM |