<!--autor: Marco Barría
https://twitter.com/marco_bf
-->
<figure class="circle">
<div class="mask-b"><span class="ok-btn">OK</span>
<div class="cursor"></div>
</div>
</figure>
<div class="credit-design">
<p><a href="http://www.krop.com/mattwheeler/">Matthew Wheeler</a> design and illustration of the great <a href="http://www.chrislueders.de/sponsorpay">Chris Luders.</a></p>
</div>
/* images sprites */
.circle {
cursor: pointer;
width: 215px;
height: 215px;
position: absolute;
top: 50%;
left: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: translate(-50%, -50%);
}
.mask-a, .mask-b {
border-radius: 100%;
position: relative;
width: 100%;
height: 100%;
}
.mask-a {
background: rgba(27, 45, 65, 1);
overflow: hidden;
-webkit-mask-position: 0 0;
-webkit-mask-size: 215px 215px;
-webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/mask_svg.svg);
z-index: 10;
}
.mask-b {
background: rgba(27, 45, 65, 1);
}
/*===================================================================================== OK ======================================================================================= */
.cursor, .cursor::before {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/ok_1.svg) no-repeat center center;
position: absolute;
width: 44px;
height: 44px;
}
.cursor {
background-position: 0px -31px;
top: 7em;
left: 9em;
will-change: transform;
transform: translate3d(0, 0, 0);
transition: transform 550ms ease;
}
.cursor::before {
background-position: -43px -30px;
content: "";
top: -0.3em;
left: 0.3em;
will-change: transform;
transform: translateX(0px) translateZ(0px);
transition: transform 550ms ease;
}
.ok-btn {
background: #1aaf5d;
border-radius: 0.7em;
box-shadow: 0 5px 0 #0a7237;
color: #fff;
font-size: 2em;
font-weight: 500;
text-shadow: 0 2px 0 #0a7237;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 148px;
height: 70px;
margin-left: -74px;
margin-top: -35px;
will-change: transform;
transform: translateY(0px) translateZ(0px);
line-height: 70px;
transition: all 550ms ease;
}
.circle:hover > .mask-b > .ok-btn {
background: #179951;
box-shadow: 0 0 0 1px #064320, inset 0 1px 0 0 #0a7237;
transform: translateY(5px) translateZ(0px);
transition: all 450ms 100ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
.circle:hover > .mask-b > .cursor {
transform: translate3d(-0.3em, 0.5em, 0);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
.circle:hover > .mask-b > .cursor::before {
transform: translateX(-4px) translateZ(0px);
transition: transform 450ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
background: #1e4063;
font-family: 'Fira Sans', sans-serif;
}
figure {
margin: 0;
}
.credit-design {
color: rgba(49, 82, 119, 1);
font-weight: 400;
position: absolute;
width: 100%;
left: 0;
bottom: 20px;
font-size: 0.8rem;
text-align: center;
}
.credit-design a {
color: rgba(57, 95, 137, 1);
text-decoration: none;
}