CSS Material design toggle switch

24 Jun, 2016

Because sometimes all you want is just a good looking switch without importing an entire library to do it.

Recently I added an email notification feature to Ambit where if someone the user is following comments on the users post and it is verified as not spam then an email will be sent to notify the user. I wanted the user to have control over whether or not they receive an email in these situations so I needed to create some sort of on off switch. As you can probably tell by Ambit's design I quite like material design so I decided to base it on a material design switch.

html:


<div class="togswitch" position="on" style="background: rgba(244, 67, 54, 0.498039);">
	<div class="togswitchnob" style="left: 20px; background: rgb(244, 67, 54);"></div>
	<div class="togswitchnob_touch" style="left: 20px; background: rgba(244, 67, 54, 0.0980392);"></div>
</div>

css:


.togswitch{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 40px;
  height: 16px;
  background: rgba(0,0,0,0.26);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.togswitchnob {
    width: 24px;
    height: 24px;
    background: #fafafa;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2;
}
.togswitchnob_touch {
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    transform: scale(1,1);
    -webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 1;
    opacity: 0;
}
.togswitch:active .togswitchnob_touch{
		transform:scale(2.6,2.6);
		opacity:1;
}

jQuery:


$( ".togswitch" ).each(function() {
		var posi = $(this).attr('position');
		if(posi == 'off'){
			$(this).children('.togswitchnob').css({'left': '20px'});
			$(this).css({'background': 'rgba(244,67,54,0.5)'});
			$(this).children('.togswitchnob_touch').css({'background': 'rgba(244,67,54,0.1)'});
			$(this).children('.togswitchnob').css({'background': '#f44336'});
			$(this).children('.togswitchnob_touch').css({'left': '20px'});
			$(this).attr('position','on');
		}else if(posi == 'on'){
			$(this).children('.togswitchnob').css({'left': '-4px'});
			$(this).children('.togswitchnob_touch').css({'left': '-4px'});
			$(this).css({'background': 'rgba(0,0,0,0.26)'});
			$(this).children('.togswitchnob').css({'background': '#FAFAFA'});
			$(this).children('.togswitchnob_touch').css({'background': 'rgba(0,0,0,0.05)'});
			$(this).attr('position','off');
		}
	});
	$('body').on('click','.togswitch',function(){
		var posi = $(this).attr('position');
		if(posi == 'off'){
			$(this).children('.togswitchnob').css({'left': '20px'});
			$(this).css({'background': 'rgba(244,67,54,0.5)'});
			$(this).children('.togswitchnob_touch').css({'background': 'rgba(244,67,54,0.1)'});
			$(this).children('.togswitchnob').css({'background': '#f44336'});
			$(this).children('.togswitchnob_touch').css({'left': '20px'});
			$(this).attr('position','on');
		}else if(posi == 'on'){
			$(this).children('.togswitchnob').css({'left': '-4px'});
			$(this).children('.togswitchnob_touch').css({'left': '-4px'});
			$(this).css({'background': 'rgba(0,0,0,0.26)'});
			$(this).children('.togswitchnob').css({'background': '#FAFAFA'});
			$(this).children('.togswitchnob_touch').css({'background': 'rgba(0,0,0,0.05)'});
			$(this).attr('position','off');
		}
	});

See the Pen CSS Material design switch by Karna (@kknmalone) on CodePen.

Then I simply put an Ajax call to the server in the if statement to change the users email notification settings.

Other Tutorials

View All

Using variables in CSS

css - javascript

When styling your web app, you've probably found yourself copying hex colour codes, margin parameters or other styles to several elements to achieve a consistent design across your app.

Beme style progress bar

html - css - javascript

How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.

Building a custom chromecast web app

html - javascript

Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.