"button"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: