Changing the icon Options

[abody]

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]

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>