<div ng-app="app">
  <div id="page" ng-controller="switch_ctrl">
        <div class="switch">
          <div class="s_wrapper">
            <form action="" accept-charset="utf-8">
              <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32.323975mm" height="32.323978mm" viewBox="0 0 114.53377 114.53378" class="switch_bubble" version="1.1">
    <defs id="defs4"/>
    <metadata id="metadata7"/>
    <g id="layer1" transform="translate(-260.81948,-491.03328)">
      <path d="m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z" id="path4136" fill="#000"/>
    </g>
  </svg>
              <label>
                <input type="radio"  name="area" ng-model="action.mode" value="view" ng-change="bubblisity()">
                <md-icon>
                  view_list
                </md-icon>
              </label>
              <label>
                <input type="radio"  name="area" ng-model="action.mode" value="edit" ng-change="bubblisity()">
                <md-icon>
                  settings
                </md-icon>
              </label>
            </form>
          </div>
        </div>
      </div>
</div>
<footer>
  <div>
    Based on <a href="https://dribbble.com/shots/2440217-Fluid-Switch" target="_blank">Leonardo Zakour</a> creation
  </div>
</footer>
/*=====================================
=            SWITCH STYLES            =
======================================*/
@import "compass"; 

body {
  background-color:#4085ee;
  
  > div {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
#page {
	position: relative;
	width: 100%;
	height: 100%;
	@include display-flex;
	@include justify-content( center );
	@include align-items( center );
}

.switch {
	input {
		display: none;
		visibility: hidden;
		opacity: 0;
	}

	.s_wrapper {
		position: relative;
		background-color: #1e59af;
		width: 120px;
		height: 60px;
		@include border-radius( 40px );

		form {
			position: relative;
			width: 100%;
			height: 100%;
			@include clearfix;
      overflow:visible;

			label {
				width: 50%;
				height: 100%;
				float: left;
				text-align: center;
				display: flex;
				@include justify-content( center );

				md-icon {
					z-index: 2;
          cursor: pointer;
          color:#4085ee;
				}

			}
		}

		.switch_bubble {
			position: absolute;
			height: 140%;
			width: auto;
			z-index: 0;
			left: -10%;
			top: -20%;
			overflow: visible;

			path {
				fill: #FFFFFF;
			}
		}

		label {
			z-index: 1;
		}
	}
}

footer {
  position: absolute;
  width: 100%;
  left:0;
  bottom:0;
  text-align:center;
  padding: 16px 0;
  color: #FFFFFF;
  a {
    color: #1e59af;
  }
}
View Compiled
var app = angular.module('app', ['ngMaterial']);

app.controller('switch_ctrl', ['$scope', '$element', function($, iElm){
	$.bubble = iElm[0].querySelector('.switch_bubble');
	$.action = {
		mode: "view"
	};
	$.bubblisity = function() {
		var goo_r = "m374.46898 548.22101c0 31.09552-23.46384 46.8216-48.30342 42.30342-14.47387-2.63271-45.5056-19.85157-65.44189-27.20312-22.20319-8.18748-40.86153 1.28386-40.86153-15.1003 0-16.48716 18.89368-7.0702 41.28072-15.25421 19.8359-7.25139 50.60538-24.69441 65.0227-27.04921 25.53469-4.17062 48.30342 11.2079 48.30342 42.30342z",
			goo_l = "m261.51459 548.22101c0 31.09552 25.46384 40.8216 50.30342 36.30342 14.47387-2.63271 43.5056-13.85157 63.44189-21.20312 22.20319-8.18748 40.86153 1.28386 40.86153-15.1003 0-16.48716-18.89368-7.0702-41.28072-15.25421-19.8359-7.25139-48.60538-18.69441-63.0227-21.04921-25.53469-4.17062-50.30342 5.2079-50.30342 36.30342z",
			ungoo = "m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z";

		if ($.action.mode == "view") {
			TweenMax.to($.bubble, 0.7, {
				xPercent: 0,
				ease: Power3.easeInOut
			});
			TweenMax.to($.bubble.querySelector('path'), 0.45, {
				morphSVG: goo_l,
				ease: Power2.easeIn
			});
			TweenMax.to($.bubble.querySelector('path'), 0.55, {
				morphSVG: ungoo,
				delay:0.45,
				ease: Elastic.easeOut.config( 0.4, 0.25)
			});
		} else {
			TweenMax.to($.bubble, 0.7, {
				xPercent: 70,
				ease: Power3.easeInOut
			});
			TweenMax.to($.bubble.querySelector('path'), 0.45, {
				morphSVG: goo_r,
				ease: Power2.easeIn
			});
			TweenMax.to($.bubble.querySelector('path'), 0.55, {
				morphSVG: ungoo,
				delay:0.45,
				ease: Elastic.easeOut.config( 0.4, 0.25)
			});
		};

	}
}]);

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-route.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-aria.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-messages.min.js
  6. https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js