<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/montechristos/pen/EPvOwJ?depth=everything&limit=all&order=popularity&page=83&q=icon&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css'>
<style class="cp-pen-styles">/*=====================================
= SWITCH STYLES =
======================================*/
body {
background-color: #4085ee;
}
body > div {
position: relative;
width: 100%;
height: 100%;
}
#page {
position: relative;
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.switch input {
display: none;
visibility: hidden;
opacity: 0;
}
.switch .s_wrapper {
position: relative;
background-color: #1e59af;
width: 120px;
height: 60px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.switch .s_wrapper form {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
*zoom: 1;
overflow: visible;
}
.switch .s_wrapper form label {
width: 50%;
height: 100%;
float: left;
text-align: center;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.switch .s_wrapper form label md-icon {
z-index: 2;
cursor: pointer;
color: #4085ee;
}
.switch .s_wrapper .switch_bubble {
position: absolute;
height: 140%;
width: auto;
z-index: 0;
left: -10%;
top: -20%;
overflow: visible;
}
.switch .s_wrapper .switch_bubble path {
fill: #FFFFFF;
}
.switch .s_wrapper label {
z-index: 1;
}
footer {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
padding: 16px 0;
color: #FFFFFF;
}
footer a {
color: #1e59af;
}
</style></head><body>
<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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-route.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-aria.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-messages.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script >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)
});
};
}
}]);
//# sourceURL=pen.js
</script>
</body></html>
