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

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.

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.

How to center things with CSS

html - css


Being able to center text, divs and images is one of the most important things that you can utilize to create clean and modern websites.

karnamalone@gmail.com