With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white version as the default and then introduce a toggle switch button that transitions to a colored version.
Although I've successfully created the button in my HTML code snippet, I'm now struggling with understanding how to link and smoothly transition from one stylesheet to another using JavaScript. Here is the HTML portion for the button:
.switch {
position: relative;
height: 34px;
width: 60px;
display: inline-block;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: white;
border-radius: 26px;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
border-radius: 50%;
background-color: black;
left: 4px;
top: 4px;
transition: 0.4s;
}
input:checked + .slider {
background-color: #fffe54;
}
input:checked + .slider:before {
transform: translateX(26px);
}<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>If anyone can offer guidance or assistance, it would be greatly appreciated!