"svg button"
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<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/chrisgannon/pen/EyaPZZ?limit=all&page=7&q=svg" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">body { background-color: #423852; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 100%; height: 100%; visibility: hidden; } .selectionDot, #menuShadow, #dimIconGroup > path, .menuHit { pointer-events: none; } .menuItem { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }</style></head><body> <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"> <defs> <pattern patternUnits="userSpaceOnUse" id="bgPattern" width="4" height="4" x="0" y="0"> <rect width="4" height="4" fill="#F9F9EF"/> <rect width="1" height="1" fill="#D6D3CC"/> <rect x="3" width="1" height="1" fill="#D6D3CC"/> <rect x="2" y="3"width="1" height="1" fill="#E6E4DB"/> <rect x="4" y="3" width="1" height="1" fill="#E6E4DB"/> </pattern> <circle id="selectionDot" cy="304" r="27"/> <clipPath id="menuMask0"> <circle id="menuDot0" cx="284" cy="304" r="30"/> </clipPath> <clipPath id="menuMask1"> <circle id="menuDot1" cx="361" cy="304" r="30"/> </clipPath> <clipPath id="menuMask2"> <circle id="menuDot2" cx="438" cy="304" r="30"/> </clipPath> <clipPath id="menuMask3"> <circle id="menuDot3" cx="515" cy="304" r="30"/> </clipPath> <mask id="mainMask"> <rect width="100%" height="100%" fill="#FFF" /> <use xlink:href="#menuDot0" fill="#000"/> <use xlink:href="#menuDot1" fill="#000" /> <use xlink:href="#menuDot2" fill="#000" /> <use xlink:href="#menuDot3" fill="#000" /> </mask> <filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="2" result="coloredBlur" /> <feOffset dx="0" dy="7" result="offsetblur"></feOffset> <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.095"></feFlood> <feComposite in2="offsetblur" operator="in"></feComposite> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <!-- <use xlink:href="#menuGroup" fill="#5C4F71"/> --> <g id="menuGroup" fill="#5C4F71"> <use xlink:href="#menuDot0" class="menuItem" ><title>Shopping</title></use> <use xlink:href="#menuDot1" class="menuItem" ><title>Settings</title></use> <use xlink:href="#menuDot2" class="menuItem" ><title>Chat</title></use> <use xlink:href="#menuDot3" class="menuItem" ><title>Notification</title></use> <use xlink:href="#menuDot0" class="menuHit" fill="#ededed" opacity="0" /> <use xlink:href="#menuDot1" class="menuHit" fill="#ededed" opacity="0" /> <use xlink:href="#menuDot2" class="menuHit" fill="#ededed" opacity="0" /> <use xlink:href="#menuDot3" class="menuHit" fill="#ededed" opacity="0" /> </g> <g filter="url(#glow)" id="menuShadow"> <g mask="url(#mainMask)"> <rect width="100%" height="100%" fill="#423852" <!-- fill="url(#bgPattern)" --> /> </g> </g> <g id="selectionDotGroup0" clip-path="url(#menuMask0)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#E15E58"/> </g> <g id="selectionDotGroup1" clip-path="url(#menuMask1)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#FABB74"/> </g> <g id="selectionDotGroup2" clip-path="url(#menuMask2)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#73AFCE"/> </g> <g id="selectionDotGroup3" clip-path="url(#menuMask3)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#E16596"/> </g> <g id="dimIconGroup"> <path fill="#9387A9" d="M285.3,302C285.3,302.1,285.3,302.1,285.3,302l-0.4,0.7c-0.3,0.6-1,0.8-1.6,0.5c-0.6-0.3-0.8-1-0.5-1.6 l0.4-0.7l0.6-1.1l3-5.8c0.1-0.2,0.4-0.3,0.6-0.2l1.3,0.7c0.2,0.1,0.3,0.4,0.2,0.6L285.3,302z M294.3,302v1.6c0,0.5-0.4,0.8-0.8,0.8 h-0.9v9.3c0,0.5-0.4,0.8-0.8,0.8h-15.7c-0.5,0-0.8-0.4-0.8-0.8v-9.3h-0.9c-0.5,0-0.8-0.4-0.8-0.8V302c0-0.5,0.4-0.8,0.8-0.8h7.3 c-0.3,0.5-0.3,1.2-0.1,1.7c0.2,0.6,0.6,1.1,1.2,1.4c0.3,0.2,0.7,0.3,1.1,0.3c0.9,0,1.7-0.5,2.1-1.3l0.3-0.6c0,0,0.1-0.1,0.1-0.1 l0.8-1.4h6.3C293.9,301.2,294.3,301.6,294.3,302z M279.8,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M279.8,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z M283.3,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M283.3,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z M284.6,308.5c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4v-1.6 c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4V308.5z M286.9,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M290.4,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M290.4,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z"/> <path fill="#9387A9" d="M371.2,302.5h-2.2c-0.2-0.9-0.6-1.7-1-2.5l1.6-1.6c0.2-0.2,0.2-0.4,0-0.6l-1.8-1.8c-0.2-0.2-0.4-0.2-0.6,0 l-1.5,1.5c-0.8-0.5-1.6-0.9-2.5-1.1v-2.2c0-0.2-0.2-0.4-0.4-0.4h-2.6c-0.2,0-0.4,0.2-0.4,0.4v2.2c-0.9,0.2-1.8,0.6-2.6,1.1 l-1.6-1.6c-0.2-0.2-0.4-0.2-0.6,0l-1.8,1.8c-0.2,0.2-0.2,0.4,0,0.6l1.6,1.6c-0.5,0.7-0.8,1.6-1,2.5h-2.3c-0.2,0-0.4,0.2-0.4,0.4 v2.6c0,0.2,0.2,0.4,0.4,0.4h2.3c0.2,0.9,0.6,1.8,1.1,2.5l-1.6,1.6c-0.2,0.2-0.2,0.4,0,0.6l1.8,1.8c0.2,0.2,0.4,0.2,0.6,0l1.6-1.6 c0.8,0.5,1.6,0.8,2.5,1v2.2c0,0.2,0.2,0.4,0.4,0.4h2.6c0.2,0,0.4-0.2,0.4-0.4v-2.2c0.9-0.2,1.7-0.5,2.5-1l1.6,1.6 c0.2,0.2,0.4,0.2,0.6,0l1.8-1.8c0.2-0.2,0.2-0.4,0-0.6l-1.5-1.5c0.5-0.8,0.9-1.6,1.1-2.6h2.2c0.2,0,0.4-0.2,0.4-0.4v-2.6 C371.7,302.7,371.5,302.5,371.2,302.5z M361.4,308.1c-2.1,0-3.9-1.7-3.9-3.9c0-2.1,1.7-3.9,3.9-3.9c2.1,0,3.9,1.7,3.9,3.9 C365.2,306.3,363.5,308.1,361.4,308.1z"/> <path fill="#9387A9" d="M449,303.5v6.6c0,0.9-0.7,1.5-1.5,1.5H447l0,2.5l-3.6-2.5h-5.7c-0.9,0-1.5-0.7-1.5-1.5v-2.3h6.4 c1.8,0,3.2-1.4,3.2-3.2v-2.6h1.7C448.3,301.9,449,302.6,449,303.5z M442.5,306.5h-7.2l-4.5,3.1l0-3.1h-0.6c-1.1,0-1.9-0.9-1.9-1.9 v-8.3c0-1.1,0.9-1.9,1.9-1.9h12.3c1.1,0,1.9,0.9,1.9,1.9v8.3C444.5,305.6,443.6,306.5,442.5,306.5z M434.1,300.2c0-0.5-0.4-1-1-1 c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1C433.6,301.2,434.1,300.8,434.1,300.2z M437.4,300.2c0-0.5-0.4-1-1-1c-0.5,0-1,0.4-1,1 c0,0.5,0.4,1,1,1C436.9,301.2,437.4,300.8,437.4,300.2z M440.6,300.3c0-0.5-0.4-1-1-1c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1 C440.2,301.3,440.6,300.9,440.6,300.3z"/> <path fill="#9387A9" d="M525,312.4h-6.1c-0.2,1.2-1.4,2.1-2.9,2.1c-1.5,0-2.8-0.9-2.9-2.1H507v-2.6c2.1-1.1,2.6-2.7,2.6-3.5 c0,0,0-4,0-4.2c0-3.1,2.2-5.6,5-6.3v-0.5c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4v0.6c2.7,0.6,4.7,2.9,5,5.6l0,4.8 c0.1,0.8,0.6,2.4,2.7,3.5V312.4z"/> </g> </svg> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script> <script >var xmlns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, dotPos = { x: 0, y: 304 }, allMenus = selectAll('.menuItem'), allMenuHits = selectAll('.menuHit'), allMenuPosArray = [], oldId = 0, currentId = 1, iconObj = [] TweenMax.set('svg', { visibility: 'visible' }) function setUI() { for (var i = 0; i < allMenus.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var menu = allMenus[i]; menu.setAttribute('menuId', i); menu.onclick = onMenuClick; allMenuPosArray.push({ x: Number(select('#menuDot' + i).getAttribute('cx')), y: Number(select('#menuDot' + i).getAttribute('cy')) }) var icon = selectAll('#dimIconGroup path')[i]; var fill = selectAll('.selectionDot')[i].getAttribute('fill'); console.log(fill) iconObj.push({ icon: icon, fill: fill }) } window.CP.exitedLoop(1); onMenuClick({ currentTarget: allMenus[0] }) } function onMenuClick(e) { oldId = currentId; if (oldId == Number(e.currentTarget.getAttribute('menuId'))) { return } currentId = (e) ? Number(e.currentTarget.getAttribute('menuId')) : currentId; if (e) { TweenMax.from(e.currentTarget, 1, { //scale:0.39, transformOrigin: '50% 50%' }) TweenMax.fromTo(allMenuHits[currentId], 1, { alpha: 0.3, scale: 1 }, { alpha: 0, scale: 0.85, transformOrigin: '50% 50%' }) /* TweenMax.fromTo(iconObj[oldId].icon, 1, { fill:iconObj[oldId].fill },{ fill:'#9387A9', ease:Power2.easeIn }) */ } //animates the masked, coloured selection dots var tl = new TimelineMax(); tl.to('.selectionDot', 0.5, { scale: 0.6, transformOrigin: '50% 50%', ease: Power2.easeIn }) .to('.selectionDot', 0.5, { x: allMenuPosArray[currentId].x, //ease:Elastic.easeOut.config(0.6, 0.8) ease: Circ.easeInOut }, '-=0.25') .to('.selectionDot', 0.9, { scale: 1, transformOrigin: '50% 50%', ease: Elastic.easeOut.config(0.6, 0.8) }, '-=0.25') //turns the pointer on and off TweenMax.staggerTo(allMenus, 0, { cycle: { cursor: function(i) { return (i == currentId) ? 'auto' : 'pointer' } } }, 0) TweenMax.staggerTo(selectAll('#dimIconGroup path'), 0.6, { cycle: { fill: function(i) { return (i == currentId) ? '#FFF' : '#9387A9' }, scale: function(i) { return (i == currentId) ? 1.2 : 0.8 }, duration: function(i) { return (i == currentId) ? 1.4 : 0.2 }, ease: function(i) { return (i == currentId) ? Power4.easeInOut : Linear.easeNone } }, transformOrigin: '50% 50%' }, 0) } setUI(); TweenMax.globalTimeScale(1.2) //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: