Back
A step-by-step tutorial on how to create a beautiful toggle neo button with texts ",on" and "off".
<div class="container">
<div class="toggle" onclick="toggle()">
<div class="circle"></div>
</div>
<span class="text">FF</span>
</div>
let active = false
Now we'll create a toggle function, which will be triggered on circle click.
At the beginning, we are selecting the toggle and text element using querySelector method.
Then we'll change the active status to the opposite of it's current value, by setting the exclamation mark (“!”) in front of it (!active). If active was true, it will now become false and vice versa.
Now, if active is true, we'll add the active class to toggle element and change "FF" text to "N".
If it's false, we'll remove active class from toggle element and set text to "FF".
function toggle() {
let toggle = document.querySelector('.toggle')
let text = document.querySelector('.text')
active = !active
if (active) {
toggle.classList.add('active')
text.innerHTML = 'N'
} else {
toggle.classList.remove('active')
text.innerHTML = 'FF'
}
}
.text {
font-size: 23px;
color: #494949;
}
Toggle element will be positioned relative with 40x20px size (twice as wide as circle - which we'll set later).
We'll set rounded border to dark dray as if toggle is off.
Then we'll display everything in center using flexbox.
Lastly, I'm setting cursor to pointer, because this element is clickable, triggers the on/off button, and I'm adding transition so that toggle is nice and smooth.
.toggle {
position: relative;
width: 40px;
height: 20px;
border: 2px solid #494949;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .3s;
}
Circle will be positioned absolute with left set to zero. This is the off status.
We'll set the width and height to 20 pixels (half width of it's parent).
Now add some border radius and set the background color to dark grey. This color will become green when toggle is clicked.
Don't forget the transition.
.circle {
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #494949;
transition: .3s;
}
Now we're styling the active class.
This class is added to toggle element when active status.
We'll just set the border color to green.
.active {
border-color: rgb(85, 227, 180);
}
Now we'll select the sibling using the plus selector (“+“) and set it's color to green. We are talking about "N" text here.
.active + .text {
color: rgb(85, 227, 180);
}
Lastly, we'll style the circle when active.
We'll move it to the right side of it's container by setting the left property to 100% and translate X by -100%.
We'll also change the background color to green and add some transition.
.active .circle {
left: 100%;
transform: translateX(-100%);
transition: .3s;
background-color: rgb(85, 227, 180);
}
And that's it.
<div class="container">
<div class="toggle" onclick="toggle()">
<div class="circle"></div>
</div>
<span class="text">FF</span>
</div>
<script>
let active = false
function toggle() {
let toggle = document.querySelector('.toggle')
let text = document.querySelector('.text')
active = !active
if (active) {
toggle.classList.add('active')
text.innerHTML = 'N'
} else {
toggle.classList.remove('active')
text.innerHTML = 'FF'
}
}
</script>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
.text {
font-size: 23px;
color: #494949;
}
.toggle {
position: relative;
width: 40px;
height: 20px;
border: 2px solid #494949;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .3s;
}
.circle {
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #494949;
transition: .3s;
}
.active {
border-color: rgb(85, 227, 180);
}
.active + .text {
color: rgb(85, 227, 180);
}
.active .circle {
left: 100%;
transform: translateX(-100%);
transition: .3s;
background-color: rgb(85, 227, 180);
}
</style>
Thank you for reading this article.