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

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.

Responsive web design guide

css - html

In 2017 it was recorded that around 63% of all U.S web traffic is made up of mobile devices. It is becoming increasingly vital that websites adopt a responsive design to accommodate this rapidly growing portion of the market.

Handy Python tricks for beginners

python

When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.