Reading Time: 2 minutes
Here is an example of how to create a simple sliding button or slider using HTML, CSS, and JavaScript.
This code demonstrates how to create a sliding button or slider using HTML, CSS, and JavaScript. The goal is to change the state of the button when clicked.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
/* Styles for the sliding button */
.slider {
width: 200px;
height: 40px;
position: relative;
background: linear-gradient(to right, #00d2ff, #3a47d5);
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
.slider:before {
content: '';
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 80px;
height: 30px;
border-radius: 15px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: 0.4s;
}
/* Style for the button when it is active */
.slider.active {
background: linear-gradient(to right, #ff8a00, #e52e71);
}
.slider.active:before {
left: calc(100% - 90px);
}
</style>
</head>
<body>
<div class="slider"></div>
<script>
// Function to toggle the button state
function toggleSlider() {
var slider = document.querySelector('.slider');
slider.classList.toggle('active');
}
// Click event to toggle the button state
document.querySelector('.slider').addEventListener('click', toggleSlider);
</script>
</body>
</html>
The code starts by defining the CSS styles for the sliding button. The HTML document body is set to vertically and horizontally center the sliding button on the page. The body background has a light gray color.
The sliding button itself is represented using the CSS class “.slider”. It has a width of 200 pixels, a height of 40 pixels, and uses a linear gradient color combination for the background. It also has rounded borders, a cursor set to “pointer”, and hidden overflow style.
In addition, the “:before” pseudo-class is used to create an additional element inside the button that serves as the actual slider control. This slider control has a white background, box shadow, and a smooth 0.4-second transition. Initially, it is positioned on the left side of the button.
The CSS class “.slider.active” defines the style of the button when it is active. In this case, the button background is modified to have a different gradient color, and the slider control is moved to the right to reach the final position.
The included JavaScript code creates a function called “toggleSlider()” that changes the state of the button. When invoked, this function selects the element with the “.slider” class and uses the “classList.toggle()” method to toggle the presence of the “active” class on the element. This means that if the class is present, it will be removed, and if it’s not present, it will be added.
Finally, a click event is added to the element with the “.slider” class, which calls the “toggleSlider()” function when the button is clicked. This allows changing the state of the sliding button when clicked.
The result is as follows:
I hope this is helpful. Have a great day!
