Ever wondered how to make a toggle switch with glowing light, using CSS and vanilla JavaScript? In this article we've got you covered and would be showing you how to make a nice and cool switch, particularly what you have above using CSS and JavaScript. This is basically a walkthrough for the classList property in JavaScript.
So in here, we would have our switch button translate onclick to a desired position, by changing its classList to an active one. And once it is clicked again, it returns to the default position with a nice and cool transition effect. We're two steps away from making that happen, but before that, let's set out how we want to approach this;
While adding different element and properties, we will explain its essence.
Once we're done explaining, we'll compile all of the codes, so you see how it plays out and can as well copy it, but the overall reason you're going to be doing that, is to allow you understand better. You can also experiment with these properties to see how a change in one can affect the other.
Okay one last thing, inspiration to making this toggle switch came from the freefrontend guys, cssscript, and w3schools. They have toons of inspiring toggle switch which would likely trigger you to making yours.
So let's get started already, for the HTML we create a basic HTML5 template with the title "Toggle Switch".
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Toggle Switch</title>
</head>
<body>
</body>
</html>
And also create a basic CSS template, getting rid of the browser's default settings by assigning asterisk, a margin, padding and border property of 0px. We also assign the body a brilliant blue background color, with an hex value of #292929.
*{
margin:0px;
border:0px;
padding:0px;
}
body{
background-color:#292929;
}
What we want to have are three containers such that two of these containers aligns inside the parent container just as you have in the Image below.
To do that we head-on to the body section of our HTML and create these containers. We first create a button and this button would serve as our parent container, so we give it an id attribute of cont (short for container). This is to allow us style and target it in CSS and JavaScript.
<button id="cont"> </button>
We need another container inside the parent container. This new container we need would have the glowing light effect once the switch button is clicked, so we place it inside of the parent container (button with the id cont) and assign it an id attribute of btn-bg short for button background. The reason we are providing it with attribute is basically to allow us target it in CSS and JavaScript as I said earlier.
<button id="btn-bg"></button>
We need also another button element aligned inside the two containers. This button element is the switch button that onclick would move to our desired position and once clicked again would translate or move back to its original position. We give it an Id attribute of btn short for button (switch button), by now you should know the reason we're providing it with an id.
<button id="btn"> </button>
If you checkout our preview you'll also notice a period like element placed inside the switch button, particularly its just to add an extra effect to the switch such that onclick of the button switch, its glows alongside with the button background (btn-bg). We place it inside of our switch button giving it an id of dot.
<div id="dot"></div>
So this is the whole setout;
<button id="cont">
<button id="btn-bg">
<button id="btn">
<div id="dot"></div>
<button>
<button>
<button>
Now if you notice we try to give these elements id's that matches their essence so we don't forget why we have them where they are. As a web developer, sometimes this tips are helpful. We're done creating all the element we need for this exercise, next we do is style them, so we head on to CSS to make that happen. Remember we took care of our browser's default setting by assigning the asterisk a margin, border and padding of 0px. Not also forgetting that we assigned a background-color to our page i.e the body.
*{
margin:0px;
border:0px;
padding:0px;
}
body{
background-color:#292929;
}
From there we begin to style our containers and we start with the parent container (button with id="cont") and also since we are targeting an id attribute we use the # symbol and id name to target it in CSS.
#cont{
}
And inside of our curly braces, we start giving it its styling properties. We position the cont. button absolutely by giving the position property an absolute value.
Position:absolute;
This is to allow us work properly with the top and left property and also allow other elements to align inside it, if positioned absolutely and of course that's what we want to achieve. Next we want to do is to assign a width and height to the container. Giving the cont. button a width of 860px and height of 300px suits our design.
Width:860px;
Height: 300px;
And of course you don't need to stick to this sizing, you can go ahead and increment or decrement this value to suit your design as well. Bringing our container to the center of the page we play around with our top and left property.
top:500px;
left:70px;
Giving it a top of 500px would move the element downwards to a position 500px from the top of our page, for us, this centralizes the element from the top. So incrementing this value would move it down the page and also decrementing it would move it up the page. Experiment with this till it suit your design. We also give the element a left property of 70px. Incrementing this value, would move the element towards the right and decrementing it would move it towards the left. We'll stick to this. We then move on to style the edges of the container by setting the border radius. This is basically to round the edges of the element.
border-radius:300px;
This suits us. Incrementing that value would tend to round the edges of the container more sharply till it get to a point where the container is totally sphere or circle. We don't want that so we stick to 300px. If you are not okay with that you can go ahead and increment or decrement just to what fit your design. Remember we used a button as our container, buttons will always have outlines and outlines comes up once a button is clicked, sometimes we don't have need for it. So to get rid of it we set its property to none.
outline:none;
We move on to the background styling and for that we'll be combining colors. How you can always do that in CSS is by using the linear-gradient background property.
background:linear-gradient(
15deg, #353535,
#393939, #363636);
What we did here was combining three hex value colors and incrementing their angles by 15degree. Up next, we want to include border and this is to allow us specify style width and color to the elements' border. We'll be using the border shortcut property.
border:2px solid black;
2px border-width, solid border-style and black border-color. We'll also use the box-shadow shortcut property to add shadow to the container.
box-shadow:8px 5px 1px black ;
What we're doing here is specifying a 8px horizontal, 5px vertical and 1px blurred black shadow to the button container. We're done styling the container button, so this is it;
.cont{
position:absolute;
width:860px;
margin-left:70px;
height:300px;
background:linear-gradient(15deg,
margin-top:500px;
border-radius:300px;
#353535, #393939, #363636);
box-shadow:8px 5px 1px black;
border:2px solid black;
outline:none;
}
So the next thing we want to style is the button background which we gave a class of btn-bg. But before we continue, notice that the button background aligns properly inside the container button with a reduced height and width and some other properties. First we target it in CSS using the # symbol since it has an id attribute.
#btn-bg{ }So we go ahead declaring it properties inside the curly braces just as we did in the previous container.
First is to include its position and we'll position it absolutely on the previous container i.e the parent container.
Position:absolute;
We also give the btn-bg button a width and height but this time a bit reduced compared to its parent container, this is to allow it align inside the container properly.
width:800px;
height:260px;
While still trying to properly align the btn-bg button inside the parent container, we declare a top and left.
margin-left:100px;
margin-top:520px;
Margin top of 520px and margin-left of 100px correctly aligns the btn-bg btn inside the parent container, aside from its edges which we'll take care of, in a moment. We want to have a uniform border radius for all the buttons, so we use the same border-radius.
border-radius:300px;
We also get rid of the outline since its also a button.
outline:none;
Then we go ahead to set a background for it, we'll be using a combination of some nice hex value colors, incrementing their angle by 202 degrees.
background:linear-gradient(202deg,
#171717, #595959);
We're done styling the btn-bg button, so we head on to style the switch button. Remember this also has to align inside the two containers i.e the parent and background container, having the same height with the btn-bg button and a reduced width so there'll be space for it to translate onclick.
Okay so let's get to styling it.
#btn{ }and inside of the curling braces we our properties.
position:absolute;
width:480px;
height:260px;
Remember we mentioned it having the same height as that of the btn-bg button and a reduced width to allow us make it translate on click. Since it has the same height with the btn-bg, its position from the top would be the same as that of the btn-bg button. We also give it a margin-left same as that of the btn-bg button so it's is placed rightly inside the two containers. If you try incrementing this value 10-15px, your switch button would have a kinda 3d effect.
margin-top:520px;
margin-left:110px;
Then we apply a background color, more hex value colors.
background:linear-gradient(#595959,
#4c4c4c, #171717);
This nice combination of grey colors makes our button look nice. Next is the border radius, so we still repeat the same value of that of the parent container and btn-bg button so it aligns just well inside the two containers.
Border-radius:300px;
We also set the outline to none, to remove the outline color once it's clicked just as we did earlier for the parent and btn-bg button. We're now left to style the switch dot, so let's style it and get over with styling.
#dot{
position:absolute;
width:20px;
margin-left:425px;
height:20px;
border:2px solid black;
margin-top:-7px;
background:linear-gradient(200deg,
black, #f1f1f1);
border-radius:50%;
}
By now you should get convenient with these properties, it's just a repetition of what we did earlier for the parent container and btn-bg button but this time with a few changes, first we started by positioning it absolutely on the other three element, then went ahead to declare a height and width of 20px, this is to make it a box, then we position it properly using the margin-top and margin-left property. Then we include a border and border-radius of 50% to completely round the edges. Now, note if you asign a border of 50% to an element that is a box(same height and width), it's going to be a circle. Then we also included a background a combination of black and a grey hex value color incrementing their angle by 200 degrees. By now we are done styling our switch but what we want to happen is that onclick of the switch button(btn) we have it translate to the right to completely cover the btn-bg button from the right.
And once clicked again it translate back to its original position and the glowing light turns off with a nice and cool transition. So to have this happen we would be using JavaScript and what we'll be doing is create a function call it just anything, let's say move(). Before anything else we quickly go back to our switch button (btn) in our markup and add the onclick attribute and call the function move().
<button id="btn" onclick="move()">
Then inside the function we target the switch button by getting its id and change it's pseudo class to an active one once the is a click event. In this active class we'll add the transform property which will allow it translate and also include the transition property so it does move nice and smoothly. We'll do same for the btn-bg and dot, we'll change their active class background color, so it has that glowing effect. So let's get working.
<script type="text/javascript">
function move(){
.classList.toggle("active");
document.getElementById('btn')
.classList.toggle("active");
document.getElementById('btn-bg')
document.getElementById('dot')
</script>
.classList.toggle("active");
}
As you can see we used the document.getElement property to access the switch button which we gave an id of btn and in turn we toggle the active classlist, which we'll soon go over to CSS to style in moment. Remember we want this active class to have the transform and transition property so we can have that transitional translating effect. So back to css, we now target the active btn class.
#btn.active{
transform:translate(418px);
transition:2s;
}
So basically what is happening here is that, once the function is called, it get the element with id btn which the switch button and performs the active state of the element which is to translate 418px to the right in 2seconds. Remember also, that we want to have a new background on the btn-bg (glowing light effect) once the switch button is clicked. This is what the second line of the move function does, it get the id of the element which is btn-bg and creates an active class for it in which we're yet to style. For its styling all we do is change it background-color.
#btn-bg.active{
background:linear-gradient(
rgb(67,120,142),rgb(72,134,159),
rgb(67,120,142));
transition:2s;
}
So once the function is now called the btn-bg button performs its active state by changing its background to the new background in 2s. We also do same for the dot element.
#dot.active{
background:linear-gradient(
rgb(67,120,142),rgb(72,134,159),
rgb(67,120,142));
transition:2s;
}
By now you should have a perfect explanation for this. Below is a compilation of all the codes just as we promised.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Switch</title>
<style type="text/css">
*{
margin:0px;
background-color:#292929;
border:0px;
padding:0px;
}
body{
}
#cont{
margin-left:70px;
position:absolute;
width:860px;
height:300px;
margin-top:500px;
border-radius:300px;
background:linear-gradient(15deg,
#353535, #393939, #363636);
border:2px solid black;
height:260px;
box-shadow:8px 5px 1px black;
outline:none;
}
#btn-bg{
position:absolute;
width:800px;
margin-left:100px;
#btn-bg.active{
margin-top:520px;
background:linear-gradient(202deg,
#171717, #595959);
border-radius:300px;
outline:none;
}
width:480px;
background:linear-gradient(
rgb(67,120,142),rgb(72,134,159),
rgb(67,120,142));
transition:2s;
}
#btn{
position:absolute;
height:260px;
transition:2s;
margin-left:110px;
margin-top:520px;
background:linear-gradient(
#595959, #4c4c4c, #171717);
border-radius:300px;
outline:none;
}
#btn.active{
background:linear-gradient(
margin-left:418px;
transition:2s;
}
#dot{
position:absolute;
width:20px;
height:20px;
margin-left:425px;
margin-top:-7px;
border:2px solid black;
</style>
200deg,black, #f1f1f1);
border-radius:50%;
}
#dot.active{
background:linear-gradient(
rgb(67,120,142),rgb(72,134,159),
rgb(67,120,142));
transition:2s;
}
</head>
<body>
<script type="text/javascript">
<button id="cont" >
<button id="btn-bg" >
<button id="btn" onclick="move()">
<div id="dot" ></div>
</button>
</button>
</button>
</body>
function move(){
</script>
document.getElementById('btn')
.classList.toggle("active");
document.getElementById('btn-bg')
.classList.toggle("active");
document.getElementById('dot').
classList.toggle("active"); }
</html>
I hope you enjoyed this article. If you did, let us know. If you are not completely cleared ask questions and we'll get to reply you.You might also love our other walkthroughs where I show you how to build more components, step by step, like how we built this toggle switch today.
No comments:
Post a Comment