Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
*, *:before, *:after {
box-sizing: border-box;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transform-style: preserve-3d;
}
*:focus {
outline: none !important;
}
::-moz-selection {
background: none;
}
::selection {
background: none;
}
a {
cursor: pointer;
}
body, html {
height: 100%;
}
button, input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
margin: 0;
font-family: "proxima-nova", "Proxima Nova", sans-serif;
}
input {
opacity: 0;
}
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
font-family: "proxima-nova", "Proxima Nova", sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
background: #3FE2D9;
}
main {
perspective: 1000;
}
.single, .multiple {
opacity: 0;
will-change: transform, opacity;
transform-origin: center center;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.single {
transform: rotateX(30deg) rotateY(-30deg) translateX(300px) translateZ(200px);
-webkit-animation: rotateInLeft 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 500ms forwards;
animation: rotateInLeft 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 500ms forwards;
padding: 12px;
background: white;
border-radius: 2px;
}
.single > div {
transform-origin: 120px 50%;
opacity: 0;
will-change: transform, opacity;
-webkit-animation: bounceIn 1000ms ease-out 1750ms forwards;
animation: bounceIn 1000ms ease-out 1750ms forwards;
position: relative;
width: 92px;
}
.single > div > button {
transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
transform: translateX(74px);
will-change: transform;
position: relative;
z-index: 3;
overflow: hidden;
border-radius: 40px;
padding: 12px 18px;
background: #43CB9D;
color: white;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
.single > div > button:before {
transition: opacity 300ms ease-out, transform 0ms 300ms;
opacity: 0;
transform-origin: center center;
transform: scale(0);
will-change: transform, opacity;
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3FE2D9;
border-radius: 40px;
}
.single > div > ul {
transition: opacity 50ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: opacity;
opacity: 0;
display: flex;
flex-direction: row-reverse;
position: absolute;
left: 92px;
top: 0;
z-index: -1;
}
.single > div > ul li {
transition: all 0ms 300ms;
will-change: transform;
margin-left: -18px;
transform: translateX(-50%);
}
.single > div > ul button {
transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: background;
cursor: pointer;
position: relative;
overflow: hidden;
padding: 0 9px 0 18px;
margin: 0;
border-radius: 0 40px 40px 0;
}
.single > div > ul button:before {
transition: opacity 300ms ease-out, transform 0ms 300ms;
opacity: 0;
transform-origin: 53px 50%;
transform: scale(0);
will-change: transform, opacity;
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: calc(100% + 20px);
height: 100%;
border-radius: 40px;
}
.single > div > ul button svg {
display: block;
width: 40px;
height: 40px;
fill: white;
}
.single > div > ul button:active:before {
transition: opacity 0ms, transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
transform: none;
opacity: 1;
}
.single > div > ul button.fb {
background: #3b5997;
}
.single > div > ul button.fb:hover, .single > div > ul button.fb:focus {
background: #6c83b1;
}
.single > div > ul button.fb:before {
background: #3c5584;
}
.single > div > ul button.tw {
background: #2daae1;
}
.single > div > ul button.tw:hover, .single > div > ul button.tw:focus {
background: #62bfe9;
}
.single > div > ul button.tw:before {
background: #3292bc;
}
.single > div > ul button.in {
background: #cd486b;
}
.single > div > ul button.in:hover, .single > div > ul button.in:focus {
background: #da7690;
}
.single > div > ul button.in:before {
background: #aa4863;
}
.single > div > input {
transform: translateX(74px);
cursor: pointer;
position: absolute;
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.single > div > input:hover ~ button, .single > div > input:focus ~ button {
background: #3CB7D8;
}
.single > div > input:active ~ button:before {
transition: opacity 0ms, transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
transform: none;
opacity: 1;
}
.single > div > input:checked {
transform: none;
}
.single > div > input:checked ~ * {
transform: none;
}
.single > div > input:checked ~ ul {
transition: opacity 50ms cubic-bezier(0.19, 1, 0.22, 1) 50ms;
opacity: 1;
z-index: 2;
}
.single > div > input:checked ~ ul li {
transform: none;
transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.single > div > input:checked ~ ul li:nth-child(1) {
transition-delay: 50ms;
}
.single > div > input:checked ~ ul li:nth-child(2) {
transition-delay: 25ms;
}
.single > div > input:checked ~ ul li:nth-child(3) {
transition-delay: 0ms;
}
.multiple {
transform: rotateX(30deg) rotateY(-30deg) translateX(-300px) translateZ(200px);
-webkit-animation: rotateInRight 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 500ms forwards;
animation: rotateInRight 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 500ms forwards;
margin-top: 12px;
background: white;
border-radius: 2px;
}
.multiple ul {
display: flex;
padding: 6px;
}
.multiple ul li {
transform-origin: center center;
opacity: 0;
will-change: transform, opacity;
-webkit-animation: bounceIn 1000ms ease-out forwards;
animation: bounceIn 1000ms ease-out forwards;
display: flex;
justify-content: center;
padding: 6px;
}
.multiple ul li:nth-child(1) {
-webkit-animation-delay: 1850ms;
animation-delay: 1850ms;
}
.multiple ul li:nth-child(2) {
-webkit-animation-delay: 1950ms;
animation-delay: 1950ms;
}
.multiple ul li:nth-child(3) {
-webkit-animation-delay: 2050ms;
animation-delay: 2050ms;
}
.multiple .button {
position: relative;
height: 40px;
width: 72px;
}
.multiple .button > input {
cursor: pointer;
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.multiple .button > input:active ~ div:before {
transition: opacity 0ms, transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
transform: none;
opacity: 1;
}
.multiple .button > input:active ~ div div, .multiple .button > input:checked ~ div div {
transform: translateX(100%);
}
.multiple .button > div {
transition: all 150ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: background;
position: relative;
height: 40px;
width: 72px;
padding: 4px;
border-radius: 40px;
}
.multiple .button > div:before {
transition: opacity 300ms ease-out, transform 0ms 300ms, background 0ms 300ms;
opacity: 1;
transform-origin: center center;
transform: scale(1);
will-change: transform, opacity;
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
}
.multiple .button > div div {
transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);
will-change: transform;
height: 32px;
width: 32px;
background: white;
border-radius: 100%;
}
.multiple .button > div svg {
display: block;
height: 100%;
width: auto;
fill: white;
}
.multiple .button.fb > div {
background: #ced6e5;
}
.multiple .button.fb > div:before {
background: #3b5997;
}
.multiple .button.fb > input:hover ~ div, .multiple .button.fb > input:focus ~ div {
background: #9daccb;
}
.multiple .button.fb > input:checked ~ div {
background: #3b5997;
}
.multiple .button.fb > input:checked ~ div:before {
background: #ced6e5;
}
.multiple .button.fb > input:checked:hover ~ div, .multiple .button.fb > input:checked:focus ~ div {
background: #3e5171;
}
.multiple .button.fb svg {
fill: #3b5997;
}
.multiple .button.tw > div {
background: #cbeaf8;
}
.multiple .button.tw > div:before {
background: #2daae1;
}
.multiple .button.tw > input:hover ~ div, .multiple .button.tw > input:focus ~ div {
background: #96d5f0;
}
.multiple .button.tw > input:checked ~ div {
background: #2daae1;
}
.multiple .button.tw > input:checked ~ div:before {
background: #cbeaf8;
}
.multiple .button.tw > input:checked:hover ~ div, .multiple .button.tw > input:checked:focus ~ div {
background: #377996;
}
.multiple .button.tw svg {
fill: #2daae1;
}
.multiple .button.in > div {
background: #f3d1da;
}
.multiple .button.in > div:before {
background: #cd486b;
}
.multiple .button.in > input:hover ~ div, .multiple .button.in > input:focus ~ div {
background: #e6a4b5;
}
.multiple .button.in > input:checked ~ div {
background: #cd486b;
}
.multiple .button.in > input:checked ~ div:before {
background: #f3d1da;
}
.multiple .button.in > input:checked:hover ~ div, .multiple .button.in > input:checked:focus ~ div {
background: #87485b;
}
.multiple .button.in svg {
fill: #cd486b;
}
@-webkit-keyframes rotateInLeft {
0% {
opacity: 0;
transform: rotateX(30deg) rotateY(-30deg) translateX(300px) translateZ(200px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes rotateInLeft {
0% {
opacity: 0;
transform: rotateX(30deg) rotateY(-30deg) translateX(300px) translateZ(200px);
}
100% {
opacity: 1;
transform: none;
}
}
@-webkit-keyframes rotateInRight {
0% {
opacity: 0;
transform: rotateX(30deg) rotateY(-30deg) translateX(-300px) translateZ(200px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes rotateInRight {
0% {
opacity: 0;
transform: rotateX(30deg) rotateY(-30deg) translateX(-300px) translateZ(200px);
}
100% {
opacity: 1;
transform: none;
}
}
/* https://goo.gl/HU4Foc */
@-webkit-keyframes bounceIn {
0% {
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1;
}
5.81% {
transform: matrix3d(0.483, 0, 0, 0, 0, 0.483, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
11.61% {
transform: matrix3d(0.88, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
17.42% {
transform: matrix3d(1.09, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
23.12% {
transform: matrix3d(1.142, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
30.33% {
transform: matrix3d(1.098, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
37.44% {
transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
44.54% {
transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
51.65% {
transform: matrix3d(0.984, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
80.28% {
transform: matrix3d(1.002, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1;
}
}
@keyframes bounceIn {
0% {
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1;
}
5.81% {
transform: matrix3d(0.483, 0, 0, 0, 0, 0.483, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
11.61% {
transform: matrix3d(0.88, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
17.42% {
transform: matrix3d(1.09, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
23.12% {
transform: matrix3d(1.142, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
30.33% {
transform: matrix3d(1.098, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
37.44% {
transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
44.54% {
transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
51.65% {
transform: matrix3d(0.984, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
80.28% {
transform: matrix3d(1.002, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1;
}
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="http:/http://www.devanswer.com/codes/files/lkh0ago.js"></script>
<main>
<div class='single'>
<div>
<input type='checkbox'>
<button>Share</button>
<ul>
<li>
<button class='in'>
<svg viewBox='0 0 300 300'>
<path d='M150.499826,62 C126.736427,62 123.75632,62.1007262 114.423862,62.526555 C105.11016,62.9513418 98.7498199,64.4306279 93.1838278,66.5938103 C87.4302766,68.8295851 82.5502649,71.8215012 77.685883,76.685883 C72.8215012,81.5506122 69.8295851,86.4302766 67.593463,92.1841752 C65.4302806,97.7498199 63.9513418,104.110507 63.5262077,113.423862 C63.1003789,122.756667 63,125.736079 63,149.499826 C63,173.263573 63.1003789,176.243333 63.5262077,185.576138 C63.9513418,194.889493 65.4302806,201.25018 67.593463,206.815825 C69.8295851,212.569376 72.8215012,217.449388 77.685883,222.314117 C82.5502649,227.178499 87.4302766,230.170068 93.1838278,232.406537 C98.7498199,234.569372 105.11016,236.048658 114.423862,236.473792 C123.75632,236.899274 126.736427,237 150.499826,237 C174.263573,237 177.242985,236.899274 186.575791,236.473792 C195.889493,236.048658 202.249833,234.569372 207.815825,232.406537 C213.569723,230.170068 218.449388,227.178499 223.31377,222.314117 C228.178499,217.449388 231.170068,212.569723 233.40619,206.815825 C235.569372,201.25018 237.048658,194.889493 237.473098,185.576138 C237.899274,176.243333 238,173.263573 238,149.499826 C238,125.736427 237.899274,122.756667 237.473098,113.423862 C237.048658,104.110507 235.569372,97.7498199 233.40619,92.1841752 C231.170068,86.4302766 228.178499,81.5506122 223.31377,76.685883 C218.449388,71.8215012 213.569723,68.8295851 207.815825,66.5938103 C202.249833,64.4306279 195.889493,62.9513418 186.575791,62.526555 C177.242985,62.1007262 174.263573,62 150.499826,62 M150.499826,77.7657376 C173.863447,77.7657376 176.630639,77.8546545 185.857161,78.2756207 C194.388325,78.6649796 199.021384,80.0904293 202.104648,81.288724 C206.188923,82.8760303 209.104078,84.7721146 212.165808,87.8338444 C215.227538,90.8959215 217.123622,93.81073 218.711276,97.8950046 C219.909223,100.978269 221.334673,105.611675 221.724032,114.142491 C222.144651,123.369013 222.233915,126.136553 222.233915,149.499826 C222.233915,172.863447 222.144651,175.630987 221.724032,184.857161 C221.334673,193.388672 219.909223,198.021731 218.711276,201.104995 C217.123622,205.188923 215.227538,208.104078 212.165808,211.165808 C209.104078,214.227885 206.188923,216.12397 202.104648,217.711276 C199.021384,218.909223 194.388325,220.33502 185.857161,220.724032 C176.632029,221.144998 173.865184,221.234262 150.499826,221.234262 C127.134469,221.234262 124.367624,221.144998 115.142491,220.724032 C106.611328,220.33502 101.977922,218.909223 98.8946572,217.711276 C94.81073,216.12397 91.8955742,214.227885 88.8341917,211.165808 C85.7721146,208.104078 83.875683,205.188923 82.2883767,201.104995 C81.0904293,198.021731 79.6649796,193.388672 79.2756207,184.857509 C78.8546545,175.630987 78.7657376,172.863447 78.7657376,149.499826 C78.7657376,126.136553 78.8546545,123.369013 79.2756207,114.142491 C79.6649796,105.611675 81.0904293,100.978269 82.2883767,97.8950046 C83.875683,93.81073 85.7721146,90.8959215 88.8338444,87.8341917 C91.8955742,84.7721146 94.81073,82.8760303 98.8946572,81.288724 C101.977922,80.0904293 106.611328,78.6649796 115.142144,78.2756207 C124.369013,77.8546545 127.136206,77.7657376 150.499826,77.7657376 M150.499826,104.567596 C125.684359,104.567596 105.567248,124.684359 105.567248,149.499826 C105.567248,174.315641 125.684359,194.432404 150.499826,194.432404 C175.315294,194.432404 195.432057,174.315641 195.432057,149.499826 C195.432057,124.684359 175.315294,104.567596 150.499826,104.567596 M150.499826,178.666667 C134.39162,178.666667 121.332986,165.608033 121.332986,149.499826 C121.332986,133.39162 134.39162,120.333333 150.499826,120.333333 C166.608033,120.333333 179.666667,133.39162 179.666667,149.499826 C179.666667,165.608033 166.608033,178.666667 150.499826,178.666667 M207.707492,102.792313 C207.707492,108.591365 203.006704,113.292154 197.207652,113.292154 C191.4086,113.292154 186.707464,108.591365 186.707464,102.792313 C186.707464,96.9932618 191.4086,92.2921259 197.207652,92.2921259 C203.006704,92.2921259 207.707492,96.9932618 207.707492,102.792313'></path>
</svg>
</button>
</li>
<li>
<button class='tw'>
<svg viewBox='0 0 300 300'>
<path d='M117.971989,221.296919 C184.008403,221.296919 220.142857,166.535014 220.142857,119.12605 C220.142857,117.585434 220.142857,116.044818 220.072829,114.504202 C227.07563,109.462185 233.168067,103.089636 238,95.8767507 C231.557423,98.7478992 224.62465,100.638655 217.341737,101.54902 C224.764706,97.1372549 230.436975,90.0644258 233.168067,81.6610644 C226.235294,85.7927171 218.532213,88.7338936 210.338936,90.3445378 C203.756303,83.3417367 194.442577,79 184.148459,79 C164.330532,79 148.22409,95.1064426 148.22409,114.92437 C148.22409,117.72549 148.57423,120.456583 149.134454,123.117647 C119.302521,121.647059 92.8319328,107.291317 75.1148459,85.5826331 C72.0336134,90.9047619 70.2829132,97.0672269 70.2829132,103.64986 C70.2829132,116.114846 76.6554622,127.109244 86.2492997,133.551821 C80.3669468,133.341737 74.8347339,131.731092 70.0028011,129.070028 L70.0028011,129.560224 C70.0028011,146.927171 82.3977591,161.492997 98.7843137,164.784314 C95.7731092,165.62465 92.6218487,166.044818 89.3305322,166.044818 C87.0196078,166.044818 84.7787115,165.834734 82.6078431,165.414566 C87.1596639,179.70028 100.464986,190.064426 116.151261,190.344538 C103.826331,200.008403 88.3501401,205.7507 71.5434174,205.7507 C68.6722689,205.7507 65.8011204,205.610644 63,205.260504 C78.8263305,215.344538 97.7338936,221.296919 117.971989,221.296919'></path>
</svg>
</button>
</li>
<li>
<button class='fb'>
<svg viewBox='0 0 300 300'>
<path d='M163.988278,238 L163.988278,158.174748 L190.783087,158.174748 L194.794624,127.064872 L163.988278,127.064872 L163.988278,107.202592 C163.988278,98.1955566 166.489117,92.0577667 179.405739,92.0577667 L195.879762,92.0500433 L195.879762,64.2257044 C193.029826,63.8472575 183.251223,63 171.874647,63 C148.12286,63 131.862775,77.4976035 131.862775,104.122498 L131.862775,127.064872 L105,127.064872 L105,158.174748 L131.862775,158.174748 L131.862775,238 L163.988278,238 Z'></path>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class='multiple'>
<ul>
<li>
<div class='button fb'>
<input type='checkbox'>
<div>
<div>
<svg viewBox='0 0 300 300'>
<path d='M163.988278,238 L163.988278,158.174748 L190.783087,158.174748 L194.794624,127.064872 L163.988278,127.064872 L163.988278,107.202592 C163.988278,98.1955566 166.489117,92.0577667 179.405739,92.0577667 L195.879762,92.0500433 L195.879762,64.2257044 C193.029826,63.8472575 183.251223,63 171.874647,63 C148.12286,63 131.862775,77.4976035 131.862775,104.122498 L131.862775,127.064872 L105,127.064872 L105,158.174748 L131.862775,158.174748 L131.862775,238 L163.988278,238 Z'></path>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class='button tw'>
<input type='checkbox'>
<div>
<div>
<svg viewBox='0 0 300 300'>
<path d='M117.971989,221.296919 C184.008403,221.296919 220.142857,166.535014 220.142857,119.12605 C220.142857,117.585434 220.142857,116.044818 220.072829,114.504202 C227.07563,109.462185 233.168067,103.089636 238,95.8767507 C231.557423,98.7478992 224.62465,100.638655 217.341737,101.54902 C224.764706,97.1372549 230.436975,90.0644258 233.168067,81.6610644 C226.235294,85.7927171 218.532213,88.7338936 210.338936,90.3445378 C203.756303,83.3417367 194.442577,79 184.148459,79 C164.330532,79 148.22409,95.1064426 148.22409,114.92437 C148.22409,117.72549 148.57423,120.456583 149.134454,123.117647 C119.302521,121.647059 92.8319328,107.291317 75.1148459,85.5826331 C72.0336134,90.9047619 70.2829132,97.0672269 70.2829132,103.64986 C70.2829132,116.114846 76.6554622,127.109244 86.2492997,133.551821 C80.3669468,133.341737 74.8347339,131.731092 70.0028011,129.070028 L70.0028011,129.560224 C70.0028011,146.927171 82.3977591,161.492997 98.7843137,164.784314 C95.7731092,165.62465 92.6218487,166.044818 89.3305322,166.044818 C87.0196078,166.044818 84.7787115,165.834734 82.6078431,165.414566 C87.1596639,179.70028 100.464986,190.064426 116.151261,190.344538 C103.826331,200.008403 88.3501401,205.7507 71.5434174,205.7507 C68.6722689,205.7507 65.8011204,205.610644 63,205.260504 C78.8263305,215.344538 97.7338936,221.296919 117.971989,221.296919'></path>
</svg>
</div>
</div>
</div>
</li>
<li>
<div class='button in'>
<input checked type='checkbox'>
<div>
<div>
<svg viewBox='0 0 300 300'>
<path d='M150.499826,62 C126.736427,62 123.75632,62.1007262 114.423862,62.526555 C105.11016,62.9513418 98.7498199,64.4306279 93.1838278,66.5938103 C87.4302766,68.8295851 82.5502649,71.8215012 77.685883,76.685883 C72.8215012,81.5506122 69.8295851,86.4302766 67.593463,92.1841752 C65.4302806,97.7498199 63.9513418,104.110507 63.5262077,113.423862 C63.1003789,122.756667 63,125.736079 63,149.499826 C63,173.263573 63.1003789,176.243333 63.5262077,185.576138 C63.9513418,194.889493 65.4302806,201.25018 67.593463,206.815825 C69.8295851,212.569376 72.8215012,217.449388 77.685883,222.314117 C82.5502649,227.178499 87.4302766,230.170068 93.1838278,232.406537 C98.7498199,234.569372 105.11016,236.048658 114.423862,236.473792 C123.75632,236.899274 126.736427,237 150.499826,237 C174.263573,237 177.242985,236.899274 186.575791,236.473792 C195.889493,236.048658 202.249833,234.569372 207.815825,232.406537 C213.569723,230.170068 218.449388,227.178499 223.31377,222.314117 C228.178499,217.449388 231.170068,212.569723 233.40619,206.815825 C235.569372,201.25018 237.048658,194.889493 237.473098,185.576138 C237.899274,176.243333 238,173.263573 238,149.499826 C238,125.736427 237.899274,122.756667 237.473098,113.423862 C237.048658,104.110507 235.569372,97.7498199 233.40619,92.1841752 C231.170068,86.4302766 228.178499,81.5506122 223.31377,76.685883 C218.449388,71.8215012 213.569723,68.8295851 207.815825,66.5938103 C202.249833,64.4306279 195.889493,62.9513418 186.575791,62.526555 C177.242985,62.1007262 174.263573,62 150.499826,62 M150.499826,77.7657376 C173.863447,77.7657376 176.630639,77.8546545 185.857161,78.2756207 C194.388325,78.6649796 199.021384,80.0904293 202.104648,81.288724 C206.188923,82.8760303 209.104078,84.7721146 212.165808,87.8338444 C215.227538,90.8959215 217.123622,93.81073 218.711276,97.8950046 C219.909223,100.978269 221.334673,105.611675 221.724032,114.142491 C222.144651,123.369013 222.233915,126.136553 222.233915,149.499826 C222.233915,172.863447 222.144651,175.630987 221.724032,184.857161 C221.334673,193.388672 219.909223,198.021731 218.711276,201.104995 C217.123622,205.188923 215.227538,208.104078 212.165808,211.165808 C209.104078,214.227885 206.188923,216.12397 202.104648,217.711276 C199.021384,218.909223 194.388325,220.33502 185.857161,220.724032 C176.632029,221.144998 173.865184,221.234262 150.499826,221.234262 C127.134469,221.234262 124.367624,221.144998 115.142491,220.724032 C106.611328,220.33502 101.977922,218.909223 98.8946572,217.711276 C94.81073,216.12397 91.8955742,214.227885 88.8341917,211.165808 C85.7721146,208.104078 83.875683,205.188923 82.2883767,201.104995 C81.0904293,198.021731 79.6649796,193.388672 79.2756207,184.857509 C78.8546545,175.630987 78.7657376,172.863447 78.7657376,149.499826 C78.7657376,126.136553 78.8546545,123.369013 79.2756207,114.142491 C79.6649796,105.611675 81.0904293,100.978269 82.2883767,97.8950046 C83.875683,93.81073 85.7721146,90.8959215 88.8338444,87.8341917 C91.8955742,84.7721146 94.81073,82.8760303 98.8946572,81.288724 C101.977922,80.0904293 106.611328,78.6649796 115.142144,78.2756207 C124.369013,77.8546545 127.136206,77.7657376 150.499826,77.7657376 M150.499826,104.567596 C125.684359,104.567596 105.567248,124.684359 105.567248,149.499826 C105.567248,174.315641 125.684359,194.432404 150.499826,194.432404 C175.315294,194.432404 195.432057,174.315641 195.432057,149.499826 C195.432057,124.684359 175.315294,104.567596 150.499826,104.567596 M150.499826,178.666667 C134.39162,178.666667 121.332986,165.608033 121.332986,149.499826 C121.332986,133.39162 134.39162,120.333333 150.499826,120.333333 C166.608033,120.333333 179.666667,133.39162 179.666667,149.499826 C179.666667,165.608033 166.608033,178.666667 150.499826,178.666667 M207.707492,102.792313 C207.707492,108.591365 203.006704,113.292154 197.207652,113.292154 C191.4086,113.292154 186.707464,108.591365 186.707464,102.792313 C186.707464,96.9932618 191.4086,92.2921259 197.207652,92.2921259 C203.006704,92.2921259 207.707492,96.9932618 207.707492,102.792313'></path>
</svg>
</div>
</div>
</div>
</li>
</ul>
</div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
try { Typekit.load({ async: true }); } catch (e) { }
</script>
</body>
</html>
