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

Essential meta tags for the modern internet

html

Meta tags give you the power to customise how your site appears to the rest of the internet. They provide a simple and fast way for web crawlers and other applications to get information about a website.

Beginners guide to Regular Expressions

javascript - php - python

Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set.

Local Storage vs Cookies (The storage showdown)

javascript

Local site storage can open up a ton of possibilities in web design and breath new life into an otherwise static web page. Whether you want to do something simple like "show a welcome message only once", or something more complex.