.button{position:relative;padding:10px 22px;border-radius:6px;border:none;color:#fff;cursor:pointer;background-color:#7d2ae8;transition:all .2s ease}.button:active{transform:scale(.96)}.button:before,.button:after{position:absolute;content:"";width:150%;left:50%;height:100%;transform:translate(-50%);z-index:-1000;background-repeat:no-repeat}.button:hover:before{top:-70%;background-image:radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,transparent 20%,#7d2ae8 20%,transparent 30%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,transparent 10%,#7d2ae8 15%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%);background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;background-position:50% 120%;animation:greentopBubbles .6s ease}@keyframes greentopBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}to{background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}.button:hover:after{bottom:-70%;background-image:radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,transparent 10%,#7d2ae8 15%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%),radial-gradient(circle,#7d2ae8 20%,transparent 20%);background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,20% 20%,18% 18%;background-position:50% 0%;animation:greenbottomBubbles .6s ease}@keyframes greenbottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%}50%{background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%}to{background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}.hourglassBackground{position:relative;background-color:#473c3c;height:130px;width:130px;border-radius:50%;margin:30px auto}.hourglassContainer{position:absolute;top:30px;left:40px;width:50px;height:70px;animation:hourglassRotate 2s ease-in 0s infinite;transform-style:preserve-3d;perspective:1000px}.hourglassContainer div,.hourglassContainer div:before,.hourglassContainer div:after{transform-style:preserve-3d}@keyframes hourglassRotate{0%{transform:rotateX(0)}50%{transform:rotateX(180deg)}to{transform:rotateX(180deg)}}.hourglassCapTop{top:0}.hourglassCapTop:before{top:-25px}.hourglassCapTop:after{top:-20px}.hourglassCapBottom{bottom:0}.hourglassCapBottom:before{bottom:-25px}.hourglassCapBottom:after{bottom:-20px}.hourglassGlassTop{transform:rotateX(90deg);position:absolute;top:-16px;left:3px;border-radius:50%;width:44px;height:44px;background-color:#999}.hourglassGlass{perspective:100px;position:absolute;top:32px;left:20px;width:10px;height:6px;background-color:#999;opacity:.5}.hourglassGlass:before,.hourglassGlass:after{content:"";display:block;position:absolute;background-color:#999;left:-17px;width:44px;height:28px}.hourglassGlass:before{top:-27px;border-radius:0 0 25px 25px}.hourglassGlass:after{bottom:-27px;border-radius:25px 25px 0 0}.hourglassCurves:before,.hourglassCurves:after{content:"";display:block;position:absolute;top:32px;width:6px;height:6px;border-radius:50%;background-color:#333;animation:hideCurves 2s ease-in 0s infinite}.hourglassCurves:before{left:15px}.hourglassCurves:after{left:29px}@keyframes hideCurves{0%{opacity:1}25%{opacity:0}30%{opacity:0}40%{opacity:1}to{opacity:1}}.hourglassSandStream:before{content:"";display:block;position:absolute;left:24px;width:3px;background-color:#fff;animation:sandStream1 2s ease-in 0s infinite}.hourglassSandStream:after{content:"";display:block;position:absolute;top:36px;left:19px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;animation:sandStream2 2s ease-in 0s infinite}@keyframes sandStream1{0%{height:0;top:35px}50%{height:0;top:45px}60%{height:35px;top:8px}85%{height:35px;top:8px}to{height:0;top:8px}}@keyframes sandStream2{0%{opacity:0}50%{opacity:0}51%{opacity:1}90%{opacity:1}91%{opacity:0}to{opacity:0}}.hourglassSand:before,.hourglassSand:after{content:"";display:block;position:absolute;left:6px;background-color:#fff;perspective:500px}.hourglassSand:before{top:8px;width:39px;border-radius:3px 3px 30px 30px;animation:sandFillup 2s ease-in 0s infinite}.hourglassSand:after{border-radius:30px 30px 3px 3px;animation:sandDeplete 2s ease-in 0s infinite}@keyframes sandFillup{0%{opacity:0;height:0}60%{opacity:1;height:0}to{opacity:1;height:17px}}@keyframes sandDeplete{0%{opacity:0;top:45px;height:17px;width:38px;left:6px}1%{opacity:1;top:45px;height:17px;width:38px;left:6px}24%{opacity:1;top:45px;height:17px;width:38px;left:6px}25%{opacity:1;top:41px;height:17px;width:38px;left:6px}50%{opacity:1;top:41px;height:17px;width:38px;left:6px}90%{opacity:1;top:41px;height:0;width:10px;left:20px}}