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.

Five practical .htaccess tricks

apache - php


Apache's '.htaccess' has some very powerful tools that you can use with minimal effort to enhance the user experience and even performance, of your website.

Immersive Parallax scrolling effect

javascript - css - html


You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.

karnamalone@gmail.com