Live preview
Preview settings
Changes appear as you type. Use Tab to test keyboard focus.
⌘ / Ctrl + S saves locally
Button submission checks
Checks will appear after the preview updates.
Buttons only: no full pages, forms, cards or navigation. Put scripts in the JavaScript tab. Tailwind uses utilities from HTML and JavaScript; use complete class names. Custom CSS supports plain CSS, without @apply, imports or plugins.
Accessibility quick check
Waiting for the rendered preview…
Try Tab, Enter and Space in the preview. Check the focus ring, hover and disabled states, then enable Reduce motion. These checks are guidance, not an accessibility certification.
Explore freely here. Remix to publish your version with credit to the creator.
About hashfx
hashfx is an animated CSS button by @hashfx. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.
- Effects and categories
- Hover effects, Toggle, Icon, Download, Animated
- Using this example
- Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hashfx</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="button">
<input id="button" type="checkbox"></input>
<label for="button">
<div class="button_inner q">
<i class="l ion-log-in"></i>
<span class="t">Downloads</span>
<span>
<i class="tick ion-checkmark-round"></i>
</span>
<div id="container" class="b_l_quad"></div>
<script>
var container = document.getElementById("container");
for (var i = 0; i < 50; i++) {
var div = document.createElement("div");
div.className = "button_spots";
container.appendChild(div);
}
</script>
</div>
</label>
</div>
</body>
</html>CSS
/* @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700,500,400italic,500italic,700italic,300italic);
body {
background: #2c3940;
overflow: hidden;
font-family: 'Fira Sans', sans-serif;
}
body a {
color: white;
padding-top: 20px;
font-size: 10px;
opacity: 0.6;
position: relative;
top: 10px;
transition: all 0.3s;
font-weight: 100;
text-decoration: none;
}
body a:hover {
opacity: 1;
}
body a i.l {
margin-right: 3px;
}
input {
display: none;
}
input:checked + label .button_inner {
background: transparent;
transform: rotate(90deg);
width: 100px;
border-radius: 100px;
box-shadow: 0px 0px 0px 440px rgba(0, 0, 0, 0);
animation: finalbox 0.4s 4.42s cubic-bezier(0.39, 2.01, 0.27, 0.75) forwards;
}
input:checked + label .button_inner span.t {
opacity: 0;
top: 20px;
}
input:checked + label i.l {
left: 14px;
opacity: 1;
top: 11px;
animation: down 1s 0.25s infinite, final 0.2s 4s forwards;
}
input:checked + label .tick {
position: absolute;
left: 2px;
right: 0;
transform: scale(0) rotate(-90deg);
color: #00c1fc;
top: 11px;
margin: auto;
font-size: 22px;
animation: tick 0.3s 4.7s forwards;
}
input:checked + label .button_spots {
opacity: 1;
}
input:checked + label .button_spots:nth-of-type(0) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.95s linear infinite, final 0.2s 4s forwards, spot-0 0.7s 10.1571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(1) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.25s linear infinite, final 0.2s 4s forwards, spot-1 0.7s 10.3666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(2) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.45s linear infinite, final 0.2s 4s forwards, spot-2 0.7s 10.8s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(3) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.35s linear infinite, final 0.2s 4s forwards, spot-3 0.7s 10.4444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(4) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.15s linear infinite, final 0.2s 4s forwards, spot-4 0.7s 11.0444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(5) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.15s linear infinite, final 0.2s 4s forwards, spot-5 0.7s 10.18s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(6) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.15s linear infinite, final 0.2s 4s forwards, spot-6 0.7s 10.9571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(7) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.15s linear infinite, final 0.2s 4s forwards, spot-7 0.7s 10.14s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(8) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.95s linear infinite, final 0.2s 4s forwards, spot-8 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(9) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 4.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.05s linear infinite, final 0.2s 4s forwards, spot-9 0.7s 10.5666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(10) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.35s linear infinite, final 0.2s 4s forwards, spot-10 0.7s 11.0333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(11) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.25s linear infinite, final 0.2s 4s forwards, spot-11 0.7s 11.1333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(12) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.75s linear infinite, final 0.2s 4s forwards, spot-12 0.7s 10.64s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(13) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.35s linear infinite, final 0.2s 4s forwards, spot-13 0.7s 10.4666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(14) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 6.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.05s linear infinite, final 0.2s 4s forwards, spot-14 0.7s 10.5571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(15) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.05s linear infinite, final 0.2s 4s forwards, spot-15 0.7s 10.7666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(16) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.05s linear infinite, final 0.2s 4s forwards, spot-16 0.7s 10.5444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(17) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 4.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.45s linear infinite, final 0.2s 4s forwards, spot-17 0.7s 10.24s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(18) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 2.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-18 0.7s 11.2s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(19) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 2.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-19 0.7s 10.58s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(20) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-20 0.7s 11.04s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(21) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.85s linear infinite, final 0.2s 4s forwards, spot-21 0.7s 10.8571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(22) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.75s linear infinite, final 0.2s 4s forwards, spot-22 0.7s 10.68s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(23) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.65s linear infinite, final 0.2s 4s forwards, spot-23 0.7s 10.4s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(24) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.45s linear infinite, final 0.2s 4s forwards, spot-24 0.7s 10.2666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(25) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.95s linear infinite, final 0.2s 4s forwards, spot-25 0.7s 10.1444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(26) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-26 0.7s 10.78s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(27) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.45s linear infinite, final 0.2s 4s forwards, spot-27 0.7s 10.6333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(28) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 2.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.55s linear infinite, final 0.2s 4s forwards, spot-28 0.7s 10.9333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(29) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 4.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-29 0.7s 10.5666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(30) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.35s linear infinite, final 0.2s 4s forwards, spot-30 0.7s 11.0444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(31) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.95s linear infinite, final 0.2s 4s forwards, spot-31 0.7s 10.68s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(32) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 5.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.85s linear infinite, final 0.2s 4s forwards, spot-32 0.7s 10.28s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(33) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.65s linear infinite, final 0.2s 4s forwards, spot-33 0.7s 11s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(34) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.35s linear infinite, final 0.2s 4s forwards, spot-34 0.7s 10.4444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(35) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 5.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.25s linear infinite, final 0.2s 4s forwards, spot-35 0.7s 10.84s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(36) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 2.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.25s linear infinite, final 0.2s 4s forwards, spot-36 0.7s 10.65s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(37) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 5.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.35s linear infinite, final 0.2s 4s forwards, spot-37 0.7s 10.7s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(38) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 5.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.35s linear infinite, final 0.2s 4s forwards, spot-38 0.7s 10.8333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(39) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.15s linear infinite, final 0.2s 4s forwards, spot-39 0.7s 10.64s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(40) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.35s linear infinite, final 0.2s 4s forwards, spot-40 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(41) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.45s linear infinite, final 0.2s 4s forwards, spot-41 0.7s 11.0444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(42) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.85s linear infinite, final 0.2s 4s forwards, spot-42 0.7s 10.75s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(43) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 6.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.45s linear infinite, final 0.2s 4s forwards, spot-43 0.7s 10.95s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(44) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.85s linear infinite, final 0.2s 4s forwards, spot-44 0.7s 10.5s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(45) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.95s linear infinite, final 0.2s 4s forwards, spot-45 0.7s 10.6666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(46) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 2.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.95s linear infinite, final 0.2s 4s forwards, spot-46 0.7s 10.2333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(47) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 5.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.35s linear infinite, final 0.2s 4s forwards, spot-47 0.7s 10.9666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(48) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 2.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.35s linear infinite, final 0.2s 4s forwards, spot-48 0.7s 10.2571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(49) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.65s linear infinite, final 0.2s 4s forwards, spot-49 0.7s 11.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(50) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.05s linear infinite, final 0.2s 4s forwards, spot-50 0.7s 11.05s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(51) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-51 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(52) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-52 0.7s 10.25s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(53) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.35s linear infinite, final 0.2s 4s forwards, spot-53 0.7s 10.9s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(54) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.45s linear infinite, final 0.2s 4s forwards, spot-54 0.7s 10.6s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(55) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.95s linear infinite, final 0.2s 4s forwards, spot-55 0.7s 10.68s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(56) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.35s linear infinite, final 0.2s 4s forwards, spot-56 0.7s 10.9333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(57) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.35s linear infinite, final 0.2s 4s forwards, spot-57 0.7s 10.8333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(58) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-58 0.7s 10.35s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(59) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 5.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.15s linear infinite, final 0.2s 4s forwards, spot-59 0.7s 10.35s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(60) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.95s linear infinite, final 0.2s 4s forwards, spot-60 0.7s 10.98s linear infinite !important;
}
.tick {
position: absolute;
left: -40;
right: 0;
transform: scale(0);
margin: auto;
font-size: 22px;
}
.button {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
text-align: Center;
height: 360px;
width: 200px;
transform: translateY(-50%);
}
.button h1 {
font-weight: 100;
color: White;
font-size: 24px;
margin: 0;
text-transform: uppercase;
}
.button h2 {
font-weight: 100;
color: #00c4ff;
opacity: 1;
font-size: 14px;
margin: 4px 0px 0px 0px;
}
.button .b_l_quad .button_spots:nth-child(1) {
padding: 5px;
left: -13px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(2) {
padding: 3px;
left: -1px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(3) {
padding: 4px;
left: 11px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(4) {
padding: 5px;
left: 23px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(5) {
padding: 3px;
left: 35px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(6) {
padding: 4px;
left: 47px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(7) {
padding: 5px;
left: 59px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(8) {
padding: 3px;
left: 71px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(9) {
padding: 5px;
left: 83px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(10) {
padding: 3px;
left: 95px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(11) {
padding: 4px;
left: 107px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(12) {
padding: 4px;
left: 119px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(13) {
padding: 3px;
left: 131px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(14) {
padding: 3px;
left: 143px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(15) {
padding: 3px;
left: 155px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(16) {
padding: 4px;
left: 167px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(17) {
padding: 3px;
left: 179px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(18) {
padding: 4px;
left: 191px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(19) {
padding: 4px;
left: 203px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(20) {
padding: 3px;
left: 215px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(20) {
padding: 4px;
left: -15px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(21) {
padding: 5px;
left: -3px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(22) {
padding: 3px;
left: 9px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(23) {
padding: 3px;
left: 21px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(24) {
padding: 5px;
left: 33px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(25) {
padding: 5px;
left: 45px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(26) {
padding: 3px;
left: 57px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(27) {
padding: 5px;
left: 69px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(28) {
padding: 5px;
left: 81px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(29) {
padding: 5px;
left: 93px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(30) {
padding: 4px;
left: 105px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(31) {
padding: 3px;
left: 117px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(32) {
padding: 4px;
left: 129px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(33) {
padding: 4px;
left: 141px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(34) {
padding: 3px;
left: 153px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(35) {
padding: 3px;
left: 165px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(36) {
padding: 3px;
left: 177px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(37) {
padding: 3px;
left: 189px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(38) {
padding: 4px;
left: 201px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(39) {
padding: 3px;
left: 213px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(40) {
padding: 3px;
left: 225px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(40) {
padding: 5px;
left: 204px;
top: -8px;
}
.button .b_l_quad .button_spots:nth-child(41) {
padding: 3px;
left: 204px;
top: 4px;
}
.button .b_l_quad .button_spots:nth-child(42) {
padding: 3px;
left: 204px;
top: 16px;
}
.button .b_l_quad .button_spots:nth-child(43) {
padding: 4px;
left: 204px;
top: 28px;
}
.button .b_l_quad .button_spots:nth-child(44) {
padding: 4px;
left: 204px;
top: 40px;
}
.button .b_l_quad .button_spots:nth-child(45) {
padding: 5px;
left: 204px;
top: 52px;
}
.button .b_l_quad .button_spots:nth-child(46) {
padding: 4px;
left: 204px;
top: 64px;
}
.button .b_l_quad .button_spots:nth-child(46) {
padding: 5px;
left: -10px;
top: -16px;
}
.button .b_l_quad .button_spots:nth-child(47) {
padding: 3px;
left: -10px;
top: -4px;
}
.button .b_l_quad .button_spots:nth-child(48) {
padding: 3px;
left: -10px;
top: 8px;
}
.button .b_l_quad .button_spots:nth-child(49) {
padding: 4px;
left: -10px;
top: 20px;
}
.button .b_l_quad .button_spots:nth-child(50) {
padding: 3px;
left: -10px;
top: 32px;
}
.button .b_l_quad .button_spots:nth-child(51) {
padding: 5px;
left: -10px;
top: 44px;
}
.button .b_l_quad .button_spots:nth-child(52) {
padding: 3px;
left: -10px;
top: 56px;
}
.button .button_spots {
position: absolute;
border-radius: 100px;
background: green;
opacity: 0;
animation: opacity 1s;
}
.button .button_spots:nth-of-type(1) {
transform-origin: 83px 19px;
background: rgba(118, 214, 132, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.2s;
}
.button .button_spots:nth-of-type(2) {
transform-origin: 87px 18px;
background: rgba(214, 199, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(3) {
transform-origin: 85px 16px;
background: rgba(122, 122, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(4) {
transform-origin: 86px 13px;
background: rgba(116, 116, 134, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(5) {
transform-origin: 86px 10px;
background: rgba(147, 212, 119, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(6) {
transform-origin: 86px 17px;
background: rgba(123, 123, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(7) {
transform-origin: 84px 10px;
background: rgba(129, 209, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(8) {
transform-origin: 80px 15px;
background: rgba(117, 117, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(9) {
transform-origin: 81px 14px;
background: rgba(120, 120, 211, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(10) {
transform-origin: 82px 18px;
background: rgba(209, 154, 122, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(11) {
transform-origin: 84px 12px;
background: rgba(214, 187, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(12) {
transform-origin: 89px 10px;
background: rgba(118, 194, 213, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(13) {
transform-origin: 81px 11px;
background: rgba(116, 202, 216, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(14) {
transform-origin: 87px 12px;
background: rgba(116, 136, 216, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.2s;
}
.button .button_spots:nth-of-type(15) {
transform-origin: 88px 10px;
background: rgba(121, 210, 137, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(16) {
transform-origin: 81px 19px;
background: rgba(169, 213, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(17) {
transform-origin: 83px 16px;
background: rgba(120, 211, 120, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(18) {
transform-origin: 83px 11px;
background: rgba(116, 201, 216, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(19) {
transform-origin: 86px 14px;
background: rgba(119, 212, 191, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(20) {
transform-origin: 88px 13px;
background: rgba(118, 118, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(21) {
transform-origin: 84px 14px;
background: rgba(118, 118, 214, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(22) {
transform-origin: 89px 12px;
background: rgba(120, 211, 143, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(23) {
transform-origin: 86px 11px;
background: rgba(117, 117, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(24) {
transform-origin: 89px 13px;
background: rgba(216, 122, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.2s;
}
.button .button_spots:nth-of-type(25) {
transform-origin: 83px 13px;
background: rgba(120, 120, 148, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(26) {
transform-origin: 84px 13px;
background: rgba(119, 119, 169, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(27) {
transform-origin: 88px 10px;
background: rgba(122, 122, 132, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(28) {
transform-origin: 80px 12px;
background: rgba(119, 212, 130, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(29) {
transform-origin: 80px 13px;
background: rgba(118, 193, 214, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(30) {
transform-origin: 87px 15px;
background: rgba(213, 118, 126, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(31) {
transform-origin: 84px 11px;
background: rgba(216, 147, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(32) {
transform-origin: 81px 17px;
background: rgba(120, 120, 211, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(33) {
transform-origin: 80px 17px;
background: rgba(122, 122, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(34) {
transform-origin: 88px 16px;
background: rgba(163, 209, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(35) {
transform-origin: 81px 19px;
background: rgba(216, 202, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(36) {
transform-origin: 87px 15px;
background: rgba(117, 159, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(37) {
transform-origin: 89px 11px;
background: rgba(173, 209, 122, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(38) {
transform-origin: 89px 16px;
background: rgba(211, 134, 120, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(39) {
transform-origin: 80px 16px;
background: rgba(117, 117, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(40) {
transform-origin: 80px 10px;
background: rgba(206, 214, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(41) {
transform-origin: 80px 18px;
background: rgba(197, 216, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(42) {
transform-origin: 89px 19px;
background: rgba(117, 117, 143, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(43) {
transform-origin: 83px 18px;
background: rgba(123, 123, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(44) {
transform-origin: 87px 11px;
background: rgba(124, 124, 208, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(45) {
transform-origin: 83px 15px;
background: rgba(118, 186, 213, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(46) {
transform-origin: 84px 18px;
background: rgba(121, 210, 182, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(47) {
transform-origin: 83px 19px;
background: rgba(120, 120, 208, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(48) {
transform-origin: 84px 11px;
background: rgba(116, 116, 216, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(49) {
transform-origin: 81px 10px;
background: rgba(116, 116, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(50) {
transform-origin: 86px 10px;
background: rgba(116, 116, 182, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(51) {
transform-origin: 88px 13px;
background: rgba(120, 211, 125, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(52) {
transform-origin: 88px 16px;
background: rgba(120, 120, 192, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button_inner {
border-radius: 2px;
position: absolute;
width: 200px;
height: 50px;
left: 0;
right: 0;
top: 50%;
margin: auto;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
font-weight: 100;
font-size: 12px;
cursor: pointer;
border: 2px solid #fff;
color: white;
text-align: Center;
transition: all 0.3s, box-shadow 0.2s, transform 0.2s 0.2s;
}
.button_inner span.t {
position: relative;
top: 6px;
opacity: 1;
left: -10px;
transition: left 0.4s 0.1s;
}
.button_inner i.l {
position: relative;
left: -19px;
top: 20px;
color: #00c4ff;
font-size: 25px;
opacity: 0;
transition: left 0.3s 0s, top 0.3s 0s, opacity 0.3s 0s;
}
.button_inner:hover {
color: #2c3940;
background: white;
box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.08);
}
.button_inner:hover span.t {
left: 16px;
transition: left 0.4s;
}
.button_inner:hover i.l {
top: 12px;
opacity: 1;
transition: left 0.3s 0s, top 0.3s 0.1s, opacity 0.3s 0.1s;
}
.button_inner:hover .button_spots:nth-of-type(1) {
animation: spot-1 0.7s 1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(2) {
animation: spot-2 0.7s 0.8571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(3) {
animation: spot-3 0.7s 0.8s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(4) {
animation: spot-4 0.7s 0.5571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(5) {
animation: spot-5 0.7s 0.4444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(6) {
animation: spot-6 0.7s 0.2571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(7) {
animation: spot-7 0.7s 0.1571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(8) {
animation: spot-8 0.7s 1.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(9) {
animation: spot-9 0.7s 0.8333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(10) {
animation: spot-10 0.7s 0.14s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(11) {
animation: spot-11 0.7s 0.88s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(12) {
animation: spot-12 0.7s 1.1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(13) {
animation: spot-13 0.7s 1.1333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(14) {
animation: spot-14 0.7s 1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(15) {
animation: spot-15 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(16) {
animation: spot-16 0.7s 1.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(17) {
animation: spot-17 0.7s 1.05s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(18) {
animation: spot-18 0.7s 0.98s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(19) {
animation: spot-19 0.7s 0.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(20) {
animation: spot-20 0.7s 0.7s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(21) {
animation: spot-21 0.7s 0.9571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(22) {
animation: spot-22 0.7s 0.78s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(23) {
animation: spot-23 0.7s 0.9666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(24) {
animation: spot-24 0.7s 1.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(25) {
animation: spot-25 0.7s 0.7333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(26) {
animation: spot-26 0.7s 0.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(27) {
animation: spot-27 0.7s 0.58s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(28) {
animation: spot-28 0.7s 0.5s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(29) {
animation: spot-29 0.7s 1.1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(30) {
animation: spot-30 0.7s 0.2571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(31) {
animation: spot-31 0.7s 1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(32) {
animation: spot-32 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(33) {
animation: spot-33 0.7s 0.3s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(34) {
animation: spot-34 0.7s 0.24s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(35) {
animation: spot-35 0.7s 0.4s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(36) {
animation: spot-36 0.7s 0.8s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(37) {
animation: spot-37 0.7s 1.2s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(38) {
animation: spot-38 0.7s 0.9571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(39) {
animation: spot-39 0.7s 1.05s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(40) {
animation: spot-40 0.7s 1.0666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(40) {
animation: spot-40 0.7s 0.7s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(41) {
animation: spot-41 0.7s 0.8s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(42) {
animation: spot-42 0.7s 0.95s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(43) {
animation: spot-43 0.7s 0.54s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(44) {
animation: spot-44 0.7s 0.74s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(45) {
animation: spot-45 0.7s 0.8571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(46) {
animation: spot-46 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(46) {
animation: spot-46 0.7s 0.7s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(47) {
animation: spot-47 0.7s 1.1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(48) {
animation: spot-48 0.7s 0.8333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(49) {
animation: spot-49 0.7s 0.55s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(50) {
animation: spot-50 0.7s 0.8333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(51) {
animation: spot-51 0.7s 1.0444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(52) {
animation: spot-52 0.7s 0.1444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(53) {
animation: spot-53 0.7s 0.8666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(54) {
animation: spot-54 0.7s 0.68s linear infinite;
}
@keyframes spot-1 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-18px);
opacity: 0.6;
}
}
@keyframes spot-2 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-16px);
opacity: 0.6;
}
}
@keyframes spot-3 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-14px);
opacity: 0.6;
}
}
@keyframes spot-4 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-12px);
opacity: 0.6;
}
}
@keyframes spot-5 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-10px);
opacity: 0.6;
}
}
@keyframes spot-6 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-8px);
opacity: 0.6;
}
}
@keyframes spot-7 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-6px);
opacity: 0.6;
}
}
@keyframes spot-8 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-4px);
opacity: 0.6;
}
}
@keyframes spot-9 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-2px);
opacity: 0.6;
}
}
@keyframes spot-10 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(0px);
opacity: 0.6;
}
}
@keyframes spot-11 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(2px);
opacity: 0.6;
}
}
@keyframes spot-12 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(4px);
opacity: 0.6;
}
}
@keyframes spot-13 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(6px);
opacity: 0.6;
}
}
@keyframes spot-14 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(8px);
opacity: 0.6;
}
}
@keyframes spot-15 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(10px);
opacity: 0.6;
}
}
@keyframes spot-16 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(12px);
opacity: 0.6;
}
}
@keyframes spot-17 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(14px);
opacity: 0.6;
}
}
@keyframes spot-18 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(16px);
opacity: 0.6;
}
}
@keyframes spot-19 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(18px);
opacity: 0.6;
}
}
@keyframes spot-20 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(20px);
opacity: 0.6;
}
}
@keyframes spot-20 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-10px);
opacity: 0.6;
}
}
@keyframes spot-21 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-8px);
opacity: 0.6;
}
}
@keyframes spot-22 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-6px);
opacity: 0.6;
}
}
@keyframes spot-23 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-4px);
opacity: 0.6;
}
}
@keyframes spot-24 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-2px);
opacity: 0.6;
}
}
@keyframes spot-25 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(0px);
opacity: 0.6;
}
}
@keyframes spot-26 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(2px);
opacity: 0.6;
}
}
@keyframes spot-27 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(4px);
opacity: 0.6;
}
}
@keyframes spot-28 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(6px);
opacity: 0.6;
}
}
@keyframes spot-29 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(8px);
opacity: 0.6;
}
}
@keyframes spot-30 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(10px);
opacity: 0.6;
}
}
@keyframes spot-31 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(12px);
opacity: 0.6;
}
}
@keyframes spot-32 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(14px);
opacity: 0.6;
}
}
@keyframes spot-33 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(16px);
opacity: 0.6;
}
}
@keyframes spot-34 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(18px);
opacity: 0.6;
}
}
@keyframes spot-35 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(20px);
opacity: 0.6;
}
}
@keyframes spot-36 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(22px);
opacity: 0.6;
}
}
@keyframes spot-37 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(24px);
opacity: 0.6;
}
}
@keyframes spot-38 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(26px);
opacity: 0.6;
}
}
@keyframes spot-39 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(28px);
opacity: 0.6;
}
}
@keyframes spot-40 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(30px);
opacity: 0.6;
}
}
@keyframes spot-40 {
from {
opacity: 0;
}
to {
transform: translateY(-6px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-41 {
from {
opacity: 0;
}
to {
transform: translateY(-4px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-42 {
from {
opacity: 0;
}
to {
transform: translateY(-2px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-43 {
from {
opacity: 0;
}
to {
transform: translateY(0px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-44 {
from {
opacity: 0;
}
to {
transform: translateY(2px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-45 {
from {
opacity: 0;
}
to {
transform: translateY(4px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-46 {
from {
opacity: 0;
}
to {
transform: translateY(-7px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-47 {
from {
opacity: 0;
}
to {
transform: translateY(-5px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-48 {
from {
opacity: 0;
}
to {
transform: translateY(-3px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-49 {
from {
opacity: 0;
}
to {
transform: translateY(-1px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-50 {
from {
opacity: 0;
}
to {
transform: translateY(1px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-51 {
from {
opacity: 0;
}
to {
transform: translateY(3px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-52 {
from {
opacity: 0;
}
to {
transform: translateY(5px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-53 {
from {
opacity: 0;
}
to {
transform: translateY(7px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-54 {
from {
opacity: 0;
}
to {
transform: translateY(9px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes opacity {
to {
opacity: 0;
}
}
@keyframes rotate {
from {
opacity: 0.8;
}
to {
transform: rotate(360deg);
opacity: 0.8;
}
}
@keyframes down {
from {
left: 10px;
}
to {
left: 57px;
}
}
@keyframes spew {
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
@keyframes final {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes finalbox {
to {
width: 50px;
}
}
@keyframes tick {
to {
transform: scale(1) rotate(-90deg);
}
}
*/
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700,500,400italic,500italic,700italic,300italic);
body {
background: #2c3940;
overflow: hidden;
font-family: 'Fira Sans', sans-serif;
}
body a {
color: white;
padding-top: 20px;
font-size: 10px;
opacity: 0.6;
position: relative;
top: 10px;
transition: all 0.3s;
font-weight: 100;
text-decoration: none;
}
body a:hover {
opacity: 1;
}
body a i.l {
margin-right: 3px;
}
input {
display: none;
}
input:checked + label .button_inner {
background: transparent;
transform: rotate(90deg);
width: 100px;
border-radius: 100px;
box-shadow: 0px 0px 0px 440px rgba(0, 0, 0, 0);
animation: finalbox 0.4s 4.42s cubic-bezier(0.39, 2.01, 0.27, 0.75) forwards;
}
input:checked + label .button_inner span.t {
opacity: 0;
top: 20px;
}
input:checked + label i.l {
left: 14px;
opacity: 1;
top: 11px;
animation: down 1s 0.25s infinite, final 0.2s 4s forwards;
}
input:checked + label .tick {
position: absolute;
left: 2px;
right: 0;
transform: scale(0) rotate(-90deg);
color: #00c1fc;
top: 11px;
margin: auto;
font-size: 22px;
animation: tick 0.3s 4.7s forwards;
}
input:checked + label .button_spots {
opacity: 1;
}
input:checked + label .button_spots:nth-of-type(0) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.55s linear infinite, final 0.2s 4s forwards, spot-0 0.7s 10.68s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(1) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.45s linear infinite, final 0.2s 4s forwards, spot-1 0.7s 10.5571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(2) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.15s linear infinite, final 0.2s 4s forwards, spot-2 0.7s 10.8571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(3) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.45s linear infinite, final 0.2s 4s forwards, spot-3 0.7s 10.34s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(4) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 4.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.95s linear infinite, final 0.2s 4s forwards, spot-4 0.7s 11.1s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(5) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.05s linear infinite, final 0.2s 4s forwards, spot-5 0.7s 10.5666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(6) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 5.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.05s linear infinite, final 0.2s 4s forwards, spot-6 0.7s 10.9666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(7) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.45s linear infinite, final 0.2s 4s forwards, spot-7 0.7s 11s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(8) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.45s linear infinite, final 0.2s 4s forwards, spot-8 0.7s 10.8444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(9) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.85s linear infinite, final 0.2s 4s forwards, spot-9 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(10) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-10 0.7s 10.3333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(11) {
top: 7px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.65s linear infinite, final 0.2s 4s forwards, spot-11 0.7s 10.48s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(12) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.25s linear infinite, final 0.2s 4s forwards, spot-12 0.7s 10.3666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(13) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.45s linear infinite, final 0.2s 4s forwards, spot-13 0.7s 10.24s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(14) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.45s linear infinite, final 0.2s 4s forwards, spot-14 0.7s 11.1s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(15) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.95s linear infinite, final 0.2s 4s forwards, spot-15 0.7s 10.4571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(16) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.15s linear infinite, final 0.2s 4s forwards, spot-16 0.7s 10.84s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(17) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.75s linear infinite, final 0.2s 4s forwards, spot-17 0.7s 10.34s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(18) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.35s linear infinite, final 0.2s 4s forwards, spot-18 0.7s 10.7s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(19) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.25s linear infinite, final 0.2s 4s forwards, spot-19 0.7s 10.8333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(20) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.55s linear infinite, final 0.2s 4s forwards, spot-20 0.7s 10.2666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(21) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.45s linear infinite, final 0.2s 4s forwards, spot-21 0.7s 10.3666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(22) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 5.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-22 0.7s 10.58s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(23) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.75s linear infinite, final 0.2s 4s forwards, spot-23 0.7s 11.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(24) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.35s linear infinite, final 0.2s 4s forwards, spot-24 0.7s 11.04s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(25) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.85s linear infinite, final 0.2s 4s forwards, spot-25 0.7s 10.6s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(26) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 4.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.55s linear infinite, final 0.2s 4s forwards, spot-26 0.7s 10.78s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(27) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 1.25s linear infinite, final 0.2s 4s forwards, spot-27 0.7s 11.0571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(28) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.35s linear infinite, final 0.2s 4s forwards, spot-28 0.7s 10.84s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(29) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.95s linear infinite, final 0.2s 4s forwards, spot-29 0.7s 10.55s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(30) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 6.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.95s linear infinite, final 0.2s 4s forwards, spot-30 0.7s 10.1571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(31) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 4.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.75s linear infinite, final 0.2s 4s forwards, spot-31 0.7s 10.2666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(32) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 4.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.35s linear infinite, final 0.2s 4s forwards, spot-32 0.7s 11.0444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(33) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.65s linear infinite, final 0.2s 4s forwards, spot-33 0.7s 10.8666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(34) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.55s linear infinite, final 0.2s 4s forwards, spot-34 0.7s 11.08s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(35) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 4.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.85s linear infinite, final 0.2s 4s forwards, spot-35 0.7s 10.3571428571s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(36) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.35s linear infinite, final 0.2s 4s forwards, spot-36 0.7s 10.7444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(37) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.45s linear infinite, final 0.2s 4s forwards, spot-37 0.7s 10.6666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(38) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 4.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.55s linear infinite, final 0.2s 4s forwards, spot-38 0.7s 10.5s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(39) {
top: 13px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.35s linear infinite, final 0.2s 4s forwards, spot-39 0.7s 10.3444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(40) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.95s linear infinite, final 0.2s 4s forwards, spot-40 0.7s 11.0666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(41) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 3.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.45s linear infinite, final 0.2s 4s forwards, spot-41 0.7s 10.84s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(42) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 2.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.95s linear infinite, final 0.2s 4s forwards, spot-42 0.7s 10.64s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(43) {
top: 10px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.75s linear infinite, final 0.2s 4s forwards, spot-43 0.7s 10.4s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(44) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 5.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.75s linear infinite, final 0.2s 4s forwards, spot-44 0.7s 10.5444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(45) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 6.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.05s linear infinite, final 0.2s 4s forwards, spot-45 0.7s 10.9666666667s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(46) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 2.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.35s linear infinite, final 0.2s 4s forwards, spot-46 0.7s 10.88s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(47) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 3.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.85s linear infinite, final 0.2s 4s forwards, spot-47 0.7s 10.24s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(48) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.75s linear infinite, final 0.2s 4s forwards, spot-48 0.7s 10.58s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(49) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 3px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.85s linear infinite, final 0.2s 4s forwards, spot-49 0.7s 10.54s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(50) {
top: 6px !important;
left: -34px !important;
opacity: 0;
padding: 6.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.45s linear infinite, final 0.2s 4s forwards, spot-50 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(51) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 4.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.45s linear infinite, final 0.2s 4s forwards, spot-51 0.7s 10.7444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(52) {
top: 12px !important;
left: -34px !important;
opacity: 0;
padding: 7px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.85s linear infinite, final 0.2s 4s forwards, spot-52 0.7s 10.5333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(53) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 3.25px !important;
animation: spew 1s 0.3s forwards, rotate 4.3s 0.65s linear infinite, final 0.2s 4s forwards, spot-53 0.7s 11.0444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(54) {
top: 15px !important;
left: -34px !important;
opacity: 0;
padding: 2.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 0.45s linear infinite, final 0.2s 4s forwards, spot-54 0.7s 10.7333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(55) {
top: 14px !important;
left: -34px !important;
opacity: 0;
padding: 4.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 1.05s linear infinite, final 0.2s 4s forwards, spot-55 0.7s 10.9444444444s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(56) {
top: 11px !important;
left: -34px !important;
opacity: 0;
padding: 5.5px !important;
animation: spew 1s 0.3s forwards, rotate 4.1s 0.75s linear infinite, final 0.2s 4s forwards, spot-56 0.7s 11.1333333333s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(57) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 5.75px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 0.75s linear infinite, final 0.2s 4s forwards, spot-57 0.7s 10.85s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(58) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.25s linear infinite, final 0.2s 4s forwards, spot-58 0.7s 10.5s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(59) {
top: 9px !important;
left: -34px !important;
opacity: 0;
padding: 6px !important;
animation: spew 1s 0.3s forwards, rotate 4.2s 1.45s linear infinite, final 0.2s 4s forwards, spot-59 0.7s 10.3s linear infinite !important;
}
input:checked + label .button_spots:nth-of-type(60) {
top: 8px !important;
left: -34px !important;
opacity: 0;
padding: 4px !important;
animation: spew 1s 0.3s forwards, rotate 4.4s 1.45s linear infinite, final 0.2s 4s forwards, spot-60 0.7s 10.9444444444s linear infinite !important;
}
.tick {
position: absolute;
left: -40;
right: 0;
transform: scale(0);
margin: auto;
font-size: 22px;
}
.button {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
text-align: Center;
height: 360px;
width: 200px;
transform: translateY(-50%);
}
.button h1 {
font-weight: 100;
color: White;
font-size: 24px;
margin: 0;
text-transform: uppercase;
}
.button h2 {
font-weight: 100;
color: #00c4ff;
opacity: 1;
font-size: 14px;
margin: 4px 0px 0px 0px;
}
.button .b_l_quad .button_spots:nth-child(1) {
padding: 5px;
left: -13px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(2) {
padding: 3px;
left: -1px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(3) {
padding: 3px;
left: 11px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(4) {
padding: 3px;
left: 23px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(5) {
padding: 3px;
left: 35px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(6) {
padding: 5px;
left: 47px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(7) {
padding: 3px;
left: 59px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(8) {
padding: 4px;
left: 71px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(9) {
padding: 5px;
left: 83px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(10) {
padding: 4px;
left: 95px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(11) {
padding: 5px;
left: 107px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(12) {
padding: 4px;
left: 119px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(13) {
padding: 4px;
left: 131px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(14) {
padding: 5px;
left: 143px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(15) {
padding: 5px;
left: 155px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(16) {
padding: 3px;
left: 167px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(17) {
padding: 4px;
left: 179px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(18) {
padding: 4px;
left: 191px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(19) {
padding: 5px;
left: 203px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(20) {
padding: 4px;
left: 215px;
top: 50px;
}
.button .b_l_quad .button_spots:nth-child(20) {
padding: 4px;
left: -15px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(21) {
padding: 5px;
left: -3px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(22) {
padding: 5px;
left: 9px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(23) {
padding: 3px;
left: 21px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(24) {
padding: 5px;
left: 33px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(25) {
padding: 4px;
left: 45px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(26) {
padding: 3px;
left: 57px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(27) {
padding: 5px;
left: 69px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(28) {
padding: 4px;
left: 81px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(29) {
padding: 5px;
left: 93px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(30) {
padding: 4px;
left: 105px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(31) {
padding: 3px;
left: 117px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(32) {
padding: 5px;
left: 129px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(33) {
padding: 4px;
left: 141px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(34) {
padding: 3px;
left: 153px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(35) {
padding: 4px;
left: 165px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(36) {
padding: 3px;
left: 177px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(37) {
padding: 4px;
left: 189px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(38) {
padding: 4px;
left: 201px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(39) {
padding: 4px;
left: 213px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(40) {
padding: 3px;
left: 225px;
top: -12px;
}
.button .b_l_quad .button_spots:nth-child(40) {
padding: 3px;
left: 204px;
top: -8px;
}
.button .b_l_quad .button_spots:nth-child(41) {
padding: 3px;
left: 204px;
top: 4px;
}
.button .b_l_quad .button_spots:nth-child(42) {
padding: 4px;
left: 204px;
top: 16px;
}
.button .b_l_quad .button_spots:nth-child(43) {
padding: 5px;
left: 204px;
top: 28px;
}
.button .b_l_quad .button_spots:nth-child(44) {
padding: 4px;
left: 204px;
top: 40px;
}
.button .b_l_quad .button_spots:nth-child(45) {
padding: 3px;
left: 204px;
top: 52px;
}
.button .b_l_quad .button_spots:nth-child(46) {
padding: 3px;
left: 204px;
top: 64px;
}
.button .b_l_quad .button_spots:nth-child(46) {
padding: 3px;
left: -10px;
top: -16px;
}
.button .b_l_quad .button_spots:nth-child(47) {
padding: 3px;
left: -10px;
top: -4px;
}
.button .b_l_quad .button_spots:nth-child(48) {
padding: 5px;
left: -10px;
top: 8px;
}
.button .b_l_quad .button_spots:nth-child(49) {
padding: 5px;
left: -10px;
top: 20px;
}
.button .b_l_quad .button_spots:nth-child(50) {
padding: 4px;
left: -10px;
top: 32px;
}
.button .b_l_quad .button_spots:nth-child(51) {
padding: 3px;
left: -10px;
top: 44px;
}
.button .b_l_quad .button_spots:nth-child(52) {
padding: 4px;
left: -10px;
top: 56px;
}
.button .button_spots {
position: absolute;
border-radius: 100px;
background: green;
opacity: 0;
animation: opacity 1s;
}
.button .button_spots:nth-of-type(1) {
transform-origin: 86px 16px;
background: rgba(123, 209, 173, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(2) {
transform-origin: 88px 12px;
background: rgba(120, 120, 157, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(3) {
transform-origin: 89px 18px;
background: rgba(117, 117, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(4) {
transform-origin: 88px 11px;
background: rgba(119, 126, 212, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(5) {
transform-origin: 86px 17px;
background: rgba(122, 122, 145, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(6) {
transform-origin: 86px 13px;
background: rgba(213, 118, 125, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(7) {
transform-origin: 82px 12px;
background: rgba(119, 119, 201, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(8) {
transform-origin: 87px 15px;
background: rgba(123, 123, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(9) {
transform-origin: 88px 12px;
background: rgba(118, 118, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(10) {
transform-origin: 88px 16px;
background: rgba(209, 201, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(11) {
transform-origin: 86px 19px;
background: rgba(204, 209, 122, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(12) {
transform-origin: 82px 19px;
background: rgba(149, 210, 121, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.2s;
}
.button .button_spots:nth-of-type(13) {
transform-origin: 87px 19px;
background: rgba(211, 172, 120, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(14) {
transform-origin: 82px 13px;
background: rgba(183, 213, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(15) {
transform-origin: 85px 17px;
background: rgba(216, 192, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(16) {
transform-origin: 89px 16px;
background: rgba(124, 208, 170, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(17) {
transform-origin: 81px 16px;
background: rgba(119, 119, 163, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(18) {
transform-origin: 80px 15px;
background: rgba(119, 212, 177, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(19) {
transform-origin: 80px 10px;
background: rgba(122, 129, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(20) {
transform-origin: 82px 11px;
background: rgba(121, 121, 166, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(21) {
transform-origin: 89px 19px;
background: rgba(176, 209, 122, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(22) {
transform-origin: 85px 19px;
background: rgba(216, 141, 116, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(23) {
transform-origin: 80px 19px;
background: rgba(122, 122, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(24) {
transform-origin: 86px 16px;
background: rgba(175, 212, 119, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(25) {
transform-origin: 88px 15px;
background: rgba(116, 116, 126, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.6s;
}
.button .button_spots:nth-of-type(26) {
transform-origin: 86px 11px;
background: rgba(155, 211, 120, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(27) {
transform-origin: 88px 19px;
background: rgba(116, 192, 216, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(28) {
transform-origin: 86px 12px;
background: rgba(181, 210, 121, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(29) {
transform-origin: 84px 18px;
background: rgba(209, 144, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(30) {
transform-origin: 83px 17px;
background: rgba(123, 173, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(31) {
transform-origin: 87px 13px;
background: rgba(121, 198, 210, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.1s;
}
.button .button_spots:nth-of-type(32) {
transform-origin: 80px 14px;
background: rgba(124, 124, 208, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(33) {
transform-origin: 88px 16px;
background: rgba(118, 118, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(34) {
transform-origin: 82px 13px;
background: rgba(117, 215, 194, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(35) {
transform-origin: 80px 15px;
background: rgba(209, 176, 123, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(36) {
transform-origin: 86px 14px;
background: rgba(184, 208, 124, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(37) {
transform-origin: 88px 17px;
background: rgba(208, 146, 124, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(38) {
transform-origin: 89px 12px;
background: rgba(208, 145, 124, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(39) {
transform-origin: 80px 15px;
background: rgba(122, 209, 148, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(40) {
transform-origin: 83px 18px;
background: rgba(124, 124, 124, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(41) {
transform-origin: 86px 16px;
background: rgba(117, 117, 117, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.2s;
}
.button .button_spots:nth-of-type(42) {
transform-origin: 81px 19px;
background: rgba(124, 150, 208, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button .button_spots:nth-of-type(43) {
transform-origin: 86px 14px;
background: rgba(121, 140, 210, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(44) {
transform-origin: 84px 18px;
background: rgba(117, 198, 215, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.9s;
}
.button .button_spots:nth-of-type(45) {
transform-origin: 88px 17px;
background: rgba(121, 139, 210, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(46) {
transform-origin: 83px 10px;
background: rgba(123, 131, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.7s;
}
.button .button_spots:nth-of-type(47) {
transform-origin: 81px 11px;
background: rgba(118, 118, 118, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(48) {
transform-origin: 85px 15px;
background: rgba(118, 118, 214, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.4s;
}
.button .button_spots:nth-of-type(49) {
transform-origin: 81px 19px;
background: rgba(124, 124, 143, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.8s;
}
.button .button_spots:nth-of-type(50) {
transform-origin: 81px 12px;
background: rgba(123, 200, 209, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 2s;
}
.button .button_spots:nth-of-type(51) {
transform-origin: 81px 14px;
background: rgba(122, 212, 119, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.5s;
}
.button .button_spots:nth-of-type(52) {
transform-origin: 89px 17px;
background: rgba(118, 213, 178, 1);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.12);
transition: all 1.3s;
}
.button_inner {
border-radius: 2px;
position: absolute;
width: 200px;
height: 50px;
left: 0;
right: 0;
top: 50%;
margin: auto;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
font-weight: 100;
font-size: 12px;
cursor: pointer;
border: 2px solid #fff;
color: white;
text-align: Center;
transition: all 0.3s, box-shadow 0.2s, transform 0.2s 0.2s;
}
.button_inner span.t {
position: relative;
top: 6px;
opacity: 1;
left: -10px;
transition: left 0.4s 0.1s;
}
.button_inner i.l {
position: relative;
left: -19px;
top: 20px;
color: #00c4ff;
font-size: 25px;
opacity: 0;
transition: left 0.3s 0s, top 0.3s 0s, opacity 0.3s 0s;
}
.button_inner:hover {
color: #2c3940;
background: white;
box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.08);
}
.button_inner:hover span.t {
left: 16px;
transition: left 0.4s;
}
.button_inner:hover i.l {
top: 12px;
opacity: 1;
transition: left 0.3s 0s, top 0.3s 0.1s, opacity 0.3s 0.1s;
}
.button_inner:hover .button_spots:nth-of-type(1) {
animation: spot-1 0.7s 0.5s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(2) {
animation: spot-2 0.7s 0.4666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(3) {
animation: spot-3 0.7s 0.64s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(4) {
animation: spot-4 0.7s 1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(5) {
animation: spot-5 0.7s 0.6s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(6) {
animation: spot-6 0.7s 0.8s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(7) {
animation: spot-7 0.7s 0.35s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(8) {
animation: spot-8 0.7s 0.25s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(9) {
animation: spot-9 0.7s 0.3666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(10) {
animation: spot-10 0.7s 0.95s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(11) {
animation: spot-11 0.7s 0.5666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(12) {
animation: spot-12 0.7s 0.88s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(13) {
animation: spot-13 0.7s 0.4666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(14) {
animation: spot-14 0.7s 1.0571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(15) {
animation: spot-15 0.7s 0.3571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(16) {
animation: spot-16 0.7s 0.8444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(17) {
animation: spot-17 0.7s 0.5s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(18) {
animation: spot-18 0.7s 0.6s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(19) {
animation: spot-19 0.7s 0.6s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(20) {
animation: spot-20 0.7s 0.55s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(21) {
animation: spot-21 0.7s 0.5s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(22) {
animation: spot-22 0.7s 1.1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(23) {
animation: spot-23 0.7s 0.3666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(24) {
animation: spot-24 0.7s 0.8571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(25) {
animation: spot-25 0.7s 0.64s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(26) {
animation: spot-26 0.7s 0.75s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(27) {
animation: spot-27 0.7s 0.5571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(28) {
animation: spot-28 0.7s 0.6333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(29) {
animation: spot-29 0.7s 0.3s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(30) {
animation: spot-30 0.7s 0.1444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(31) {
animation: spot-31 0.7s 0.8s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(32) {
animation: spot-32 0.7s 0.9571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(33) {
animation: spot-33 0.7s 1.05s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(34) {
animation: spot-34 0.7s 0.1571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(35) {
animation: spot-35 0.7s 0.45s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(36) {
animation: spot-36 0.7s 1.4s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(37) {
animation: spot-37 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(38) {
animation: spot-38 0.7s 1s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(39) {
animation: spot-39 0.7s 0.9571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(40) {
animation: spot-40 0.7s 1.1333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(40) {
animation: spot-40 0.7s 0.35s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(41) {
animation: spot-41 0.7s 0.8666666667s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(42) {
animation: spot-42 0.7s 0.2444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(43) {
animation: spot-43 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(44) {
animation: spot-44 0.7s 0.9s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(45) {
animation: spot-45 0.7s 0.7s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(46) {
animation: spot-46 0.7s 1.0571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(46) {
animation: spot-46 0.7s 0.24s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(47) {
animation: spot-47 0.7s 1.0333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(48) {
animation: spot-48 0.7s 0.38s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(49) {
animation: spot-49 0.7s 0.1571428571s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(50) {
animation: spot-50 0.7s 0.8444444444s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(51) {
animation: spot-51 0.7s 1.05s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(52) {
animation: spot-52 0.7s 0.6333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(53) {
animation: spot-53 0.7s 0.8333333333s linear infinite;
}
.button_inner:hover .button_spots:nth-of-type(54) {
animation: spot-54 0.7s 0.2444444444s linear infinite;
}
@keyframes spot-1 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-18px);
opacity: 0.6;
}
}
@keyframes spot-2 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-16px);
opacity: 0.6;
}
}
@keyframes spot-3 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-14px);
opacity: 0.6;
}
}
@keyframes spot-4 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-12px);
opacity: 0.6;
}
}
@keyframes spot-5 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-10px);
opacity: 0.6;
}
}
@keyframes spot-6 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-8px);
opacity: 0.6;
}
}
@keyframes spot-7 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-6px);
opacity: 0.6;
}
}
@keyframes spot-8 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-4px);
opacity: 0.6;
}
}
@keyframes spot-9 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(-2px);
opacity: 0.6;
}
}
@keyframes spot-10 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(0px);
opacity: 0.6;
}
}
@keyframes spot-11 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(2px);
opacity: 0.6;
}
}
@keyframes spot-12 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(4px);
opacity: 0.6;
}
}
@keyframes spot-13 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(6px);
opacity: 0.6;
}
}
@keyframes spot-14 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(8px);
opacity: 0.6;
}
}
@keyframes spot-15 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(10px);
opacity: 0.6;
}
}
@keyframes spot-16 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(12px);
opacity: 0.6;
}
}
@keyframes spot-17 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(14px);
opacity: 0.6;
}
}
@keyframes spot-18 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(16px);
opacity: 0.6;
}
}
@keyframes spot-19 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(18px);
opacity: 0.6;
}
}
@keyframes spot-20 {
from {
opacity: 0;
}
to {
transform: translateY(30px) translatex(20px);
opacity: 0.6;
}
}
@keyframes spot-20 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-10px);
opacity: 0.6;
}
}
@keyframes spot-21 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-8px);
opacity: 0.6;
}
}
@keyframes spot-22 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-6px);
opacity: 0.6;
}
}
@keyframes spot-23 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-4px);
opacity: 0.6;
}
}
@keyframes spot-24 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(-2px);
opacity: 0.6;
}
}
@keyframes spot-25 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(0px);
opacity: 0.6;
}
}
@keyframes spot-26 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(2px);
opacity: 0.6;
}
}
@keyframes spot-27 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(4px);
opacity: 0.6;
}
}
@keyframes spot-28 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(6px);
opacity: 0.6;
}
}
@keyframes spot-29 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(8px);
opacity: 0.6;
}
}
@keyframes spot-30 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(10px);
opacity: 0.6;
}
}
@keyframes spot-31 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(12px);
opacity: 0.6;
}
}
@keyframes spot-32 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(14px);
opacity: 0.6;
}
}
@keyframes spot-33 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(16px);
opacity: 0.6;
}
}
@keyframes spot-34 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(18px);
opacity: 0.6;
}
}
@keyframes spot-35 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(20px);
opacity: 0.6;
}
}
@keyframes spot-36 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(22px);
opacity: 0.6;
}
}
@keyframes spot-37 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(24px);
opacity: 0.6;
}
}
@keyframes spot-38 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(26px);
opacity: 0.6;
}
}
@keyframes spot-39 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(28px);
opacity: 0.6;
}
}
@keyframes spot-40 {
from {
opacity: 0;
}
to {
transform: translateY(-30px) translatex(30px);
opacity: 0.6;
}
}
@keyframes spot-40 {
from {
opacity: 0;
}
to {
transform: translateY(-6px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-41 {
from {
opacity: 0;
}
to {
transform: translateY(-4px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-42 {
from {
opacity: 0;
}
to {
transform: translateY(-2px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-43 {
from {
opacity: 0;
}
to {
transform: translateY(0px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-44 {
from {
opacity: 0;
}
to {
transform: translateY(2px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-45 {
from {
opacity: 0;
}
to {
transform: translateY(4px) translatex(40px);
opacity: 0.6;
}
}
@keyframes spot-46 {
from {
opacity: 0;
}
to {
transform: translateY(-7px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-47 {
from {
opacity: 0;
}
to {
transform: translateY(-5px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-48 {
from {
opacity: 0;
}
to {
transform: translateY(-3px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-49 {
from {
opacity: 0;
}
to {
transform: translateY(-1px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-50 {
from {
opacity: 0;
}
to {
transform: translateY(1px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-51 {
from {
opacity: 0;
}
to {
transform: translateY(3px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-52 {
from {
opacity: 0;
}
to {
transform: translateY(5px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-53 {
from {
opacity: 0;
}
to {
transform: translateY(7px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes spot-54 {
from {
opacity: 0;
}
to {
transform: translateY(9px) translatex(-40px);
opacity: 0.6;
}
}
@keyframes opacity {
to {
opacity: 0;
}
}
@keyframes rotate {
from {
opacity: 0.8;
}
to {
transform: rotate(360deg);
opacity: 0.8;
}
}
@keyframes down {
from {
left: 10px;
}
to {
left: 57px;
}
}
@keyframes spew {
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
@keyframes final {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes finalbox {
to {
width: 50px;
}
}
@keyframes tick {
to {
transform: scale(1) rotate(-90deg);
}
}