Create a Custom Toggle Switch with Pure CSS from Scratch

Key Takeaways

today you're going to learn how to make custom toggles oh and hey I'd like to point out this videos awesome sponsor Skillshare comm which offers thousands of classes in design coding business and more for instance you're about to watch my web design tutorial but you could watch this full web design course on Skillshare now Skillshare is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in youtube did you get the first two months free alright so let's get started hey everyone Gary Simon of course at row so today I'm gonna show you exactly how to make custom toggles as shown here now obviously these are real big because I have the browser zoomed up but presumably usually you'd have like a label over here I either it depends on how you want to do there's a lot of different ways on on and off label or something like that or a question of some sort but these are check boxes and we've styled in them 100% custom and you can do a lot of unique styles with these will do also another variation where we change up the appearance of these and the reason I have these kind of half semi circles is because this may potentially be toggled custom toggle buttons for a project that I've been working on that some of you may have been following throughout you know like yesterday's tutorial that um that slant YouTube channel for guitars so part of the play of course is the whole slant out that I'm trying to work in on different elements um as shown right here so this is just one concept they came up with and so that's what this tutorial will be all about customizing check boxes and trying to do unique stuff like this alright so for today's question how old were you when you got your first PC alright I'll answer that in the the description or the not the description but the first pin comment here on YouTube go ahead and answer it let me know and I yeah let's get started alright so let's get started I'm gonna create a new folder we'll just call this motto --gel and then will CD into Matar goals alright code period will open this our code editor drop which is Visual Studio code from Microsoft fits based on electron here and let's create an index dot HTML exclamation point quick boilerplate link is going to be to a main a CSS for / main CSS file toggles all right and then um we'll create a CSS folder with a main dot sass file and then we'll watch the sass alright and by the way you'll need to install that watch sass plug-in just go to google and type Visual Studio code watch sass plug-in or something like that I forget what it's called and then you have to reload your official studio code and then let's see what else do we have we're going to start with just the HTML of this so we're not going to build a full out form or anything but we're just gonna have I just - it's real literally just four lines here so control B to get rid of that sidebar make this a little bit bigger and oh by the way before we do that get control B back out right click open with live server so that any changes we make will show up here alright so um let's close that out alright so for this we're going to have just a simple div and that's going to help us just align everything to the center just for presentation purposes a label of class we'll call it switch here and inside of there we'll put our input type of checkbox and then a span class of slider around and that's it alright so this span class is necessary for creating this um this around an element for this custom toggle all right so depending on what your needs are you may have more few or eight elements but that's all we need for our demonstration also let's copy this just that line right there those lines and paste them so we have to to work with so we can compare check first uncheck States all right so now in our HTML we'll have our two regular check boxes right sweet okay so real quickly we're gonna set the body of HTML height to a hundred percent and margin zero get rid of any default margin padding and then also our body we're gonna make a background color light gray and actually we're gonna make this why is that showing way up off screen I have to get up there oh great actually I have the the correct color code off screen right here so it's a very light gray actually so if we save this you'll see that so let's um I'm gonna split this this view so that we can see all the updates that we're making while we code so let me do that real quickly all right get this up over here and ready to rock okay so also we're gonna do a real quick display grid again this isn't anything specific to this tutorial but I just want to get things centered up so justify items Center and then also a line items Center so now they're right there in the middle all right so let's get our switch out we're going to put position:relative and this switch is a class placed on to the label okay so position relative display:block we're gonna make the width 90 pixels and the height 55 pixels so you control the the height and width right here on the parent container of your inputs so then margin bottom I'm just going to put 30 pixels to get them away from each other all right and then next we're going to have our slider element so the slider position will be absolute and this slider element here is or the slaughter class is placed on to this span right here so that's what we're working with all right so position:absolute we're gonna have cursor:pointer all right and then we're going to set our top:0 left:0 right:0 and bottom zero again we can't see anything yet and yet background we're gonna say is white now we can see something because we actually gave it a background and then also we're gonna have a transition and we'll do 0.5 seconds for this so this is how long it will take for it to go back and forth when it's clicked and then border we'll have 3 pixels solid white and then also a box shadow and we'll just do 1 pixels one pixel one pixel rgba it'll kind of give us like a material design sort of shadow as you can see there let me check to make sure my head isn't covering good it's not alright so that's that we're gonna reference slider before all right and then we're going to put in position again absolute and then content we make empty bottom we're gonna say 14 pixels top and I'll describe what's happening here momentarily background color light gray transition point five seconds alright let me make sure that's all good hand going alright so now we put in input in check state plus our slider class so if it's checked then we say the background color will be black all right we're also going to put in our final stuff to make this work our slider dot round class is going to be border radius 35 pixels there we go and I believe I did leave out yes up here we'll put in switch input display:none there we go all right and then we create our our final element for our actual circular area so that slider around and then we reference before so we put in I'm putting in I chose to put percentage values 43 percent height is 43 percent it took me a while to try to get these right by the way and so we can see those now and I don't know why they're that color well we'll figure it out don't worry with we are going to put border top left radius and 50 pixels and border top right radius is 50 pixels to create the semicircle the half semicircle there we go all right and then finally we're going to put transform rotate Z negative 45 degrees like that okay so that they're not moving obviously so we just need to make sure that we get that going I missed a there we go so we're going to put in an input checked Plus and slider before and let's put that back up top where it was or underneath this this is where we're gonna put our transform this is gonna be translate X 47 pixels and again you'll have to experiment based on the size of your particular sliders and then background yellow alright so for some reason I have this issue this why did that choose that background color oh man there we go alright so let me show you let's make this even bigger perfect so again I ran through those those properties pretty fast but what's happening is if you really want to figure out how you can customize them more again some of those were absolute pixel values I had to put in based on how far we want it to roll and also the size of the circle was a little bit tough to get right so there was a lot of trial and error trying to get down the exact size this needs to be and also positioning it with top and left inside here to fit kind of perfectly so again those main CSS properties are the ones that you'll want to experiment with when you're trying to make your own custom adjustments I'm not sure if I like this with this version so what I wanted to do show you how I also did another one I kind of customized it I'm gonna say main to CSS and then in control B we'll create another file called main to all right and so I'll take everything from this one from Maine and paste it into up let me rename that I shouldn't name that a sass file there we go okay so mean - all right there we go now it's working and control be here so if we wanted to change up the appearance of these again really simple so I'm gonna go up here and the first thing I'm going to change is in our slider I class right here so we'll get rid of the box shadow all right and then we'll put in three pixel solid black this time all right there we go so that's one kind of take to take on let's change the actual the slider before it right here we're gonna change this to black all right I actually kind of like that right there and there we go and that's how you can customize your sliders obviously you know if you have a a project where you can try to integrate some of your branding in the actual UI elements I mean obviously it needs to be done correctly I'm not sure if I would consider this correct there's probably a lot of other approaches I could have taken in terms of the whole slant effect but the whole semicircle it seems like it would it would definitely make sense hopefully from a user experience standpoint like they understand that you know this is on and that's off but we'll see so hopefully you found that useful make sure you answer today's question in the comments here which is how old were you when you've got your first PC and started working on stuff or maybe not maybe you just play games anyhow let me know and I will see you guys shortly all right goodbye [Music] [Music]