<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="main.min.css">
</head>
<body>
<svg class="reset" width="50" height="50" viewPort="0 0 196 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-36.213946,-78.270817)">
<g transform="matrix(2.1193737,0,0,2.1193737,47.214476,77.868136)">
<path id="path828" d="M 12.083,1.887 C 11.288,1.093 10.353,0.528 9.356,0.19 v 2.135 c 0.48,0.239 0.935,0.55 1.334,0.95 1.993,1.994 1.993,5.236 0,7.229 -1.993,1.99 -5.233,1.99 -7.229,0 C 1.47,8.509 1.47,5.269 3.461,3.275 3.466,3.269 3.482,3.259 3.489,3.25 H 3.491 L 4.672,4.429 4.665,0.685 0.923,0.68 2.099,1.856 C 2.092,1.868 2.081,1.88 2.072,1.887 c -2.763,2.762 -2.763,7.243 0,10.005 2.767,2.765 7.245,2.765 10.011,0 2.761,-2.762 2.764,-7.243 0,-10.005 z"
style="fill:white"/>
</svg>
<div class="wrapper">
<svg class="button-container" viewBox="0 0 100 100" version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" transform='rotate(270 50 50)' class="button" cx="50" cy="50" r="40" stroke="#4eab2f" stroke-width="3.9" fill="white" />
<circle class="circle-inner" transform='rotate(270 50 50)' class="button" cx="50" cy="50" r="38.7" stroke="#4eab2f" stroke-width="0" fill="white" />
<path class="cloud" width="100"
style="fill:#1d1d1d;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 45,45 10.780986,-0.0234 c 2.206993,-0.25757 2.713601,-2.81699 1.713195,-4.37031 -0.553783,-0.85986 -1.796437,-1.20056 -2.929277,-1.17218 0.160526,-1.13682 -1.369311,-2.32795 -3.297438,-1.68372 -1.861534,-3.84457 -6.945286,-1.27764 -5.519116,2.19829 -2.318224,0.16586 -2.60715,1.84924 -2.619241,3.13369 0.04228,0.93285 0.93607,1.69672 1.870891,1.91762 z"
sodipodi:nodetypes="ccscccccc" />
</svg>
<svg class="white-arrow-container" viewBox="0 0 75 52" version="1.1" height="65" width="75" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(133.7803,-133.42453)">
<g class="matrix-white" transform="matrix(3.099112,0,0,3.099112,280.82006,-350.73311)">
<path height="5" d="m -119.1,165 1.27454,1.13423 1.23946,-1.09915"
style="fill:none;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path d="m -117.8,166 v -2.95189 0"
style="fill:none;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
</svg>
<svg
class="arrow-container" viewBox="0 0 80 80" version="1.1" height="80" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(133.7803,-132.42453)">
<g class="matrix">
<path height="5" id="path832" d="m -119.1,165 1.27454,1.13423 1.23946,-1.09915"
style="fill:none;stroke:#000000;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path834"
d="m -117.8,166 v -2.95189 0"
style="fill:none;stroke:#000000;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<path
class="white-tick"
style="fill:none;stroke:white;stroke-width:1.8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 43, 52 3.617776,3.51742 7.939073,-8.03967"/>
</svg>
</svg>
</div>
<div class="credit">
<p>Concept credit <a href="https://dribbble.com/N_H" target="_blank">Nour el Houda</p>
</div>
<script type="text/javascript" <script src="script.js" charset="utf-8"></script></script>
</body>
</html>
body{background-color:#90ea74}.arrow-container{position:absolute;left:0px;height:80px;top:0px}.button-container{height:100px}.white-arrow-container{height:66px;width:75px;position:absolute;left:0px;top:0px}.white-tick{display:none}.white-tick-ani{animation:whiteTick 2.8s;display:block}@keyframes whiteTick{0%{stroke:none}99%{stroke:none}100%{display:white}}.circle{stroke-dasharray:270px;stroke-dashoffset:270px}.complete-circle-fill{animation:fillCircle 2.8s;fill:#4eab2f}@keyframes fillCircle{0%{fill:white}95%{fill:white}100%{fill:#4eab2f}}.complete-circle{animation:dash 3s linear forwards}@keyframes dash{to{stroke-dashoffset:0px}}.wrapper{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px}.matrix-white{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311);stroke:white}.send-white-arrow{animation-timing-function:linear;animation-name:whiteArrowDown;animation-delay:0.15s;animation-duration:3s;transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -1.73311)}@keyframes whiteArrowDown{2%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311)}14%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}17%{transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -350.73311)}18%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311)}30%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}37%{transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -350.73311)}38%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311)}50%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}57%{transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -350.73311)}58%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311)}70%{fill:black;transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}77%{fill:none;transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -350.73311)}78%{fill:none;transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -350.73311)}90%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}100%{transform:matrix(3.09911, 0, 0.8, 3.09911, 280.82006, -1.73311)}}.matrix{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}.send-black-arrow{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -3.73311);animation-name:arrowDown;animation-duration:2s}@keyframes arrowDown{0%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}10%{transform:matrix(3.09911, 0, 0, 3.09911, 280.82006, -304.73311)}}.cloud{-moz-transform-origin:51px 35px;-ms-transform-origin:51px 35px;-o-transform-origin:51px 35px;-webkit-transform-origin:51px 35px;transform-origin:51px 35px;transform:scale(2.7);-ms-transform:scale(2.7);-webkit-transform:scale(2.7)}.animate-cloud{-webkit-animation-name:scale;-webkit-animation-duration:0.5s;animation-name:scale;animation-duration:0.5s}@-webkit-keyframes scale{25%{-moz-transform-origin:25px 25px;-ms-transform-origin:25px 25px;-o-transform-origin:25px 25px;-webkit-transform-origin:25px 25px;transform-origin:51px 32px;transform:scale(2);-ms-transform:scale(1.8);-webkit-transform:scale(1.8)}75%{-moz-transform-origin:25px 25px;-ms-transform-origin:25px 25px;-o-transform-origin:25px 25px;-webkit-transform-origin:25px 25px;transform-origin:51px 35px;transform:scale(2.7);-ms-transform:scale(2.7);-webkit-transform:scale(2.7)}}.reset{display:none;margin-top:20px}.reset-live{display:block}.credit{font-family:sans-serif;font-size:14px;position:absolute;bottom:1%;text-decoration:none;color:white}.credit a{font-family:sans-serif;font-weight:500;font-size:14px;color:white;text-decoration:none}
let circle = document.querySelector('.circle');
let circleInner = document.querySelector('.circle-inner');
let cloud = document.querySelector('.cloud');
let arrow = document.querySelector('.matrix');
let whiteArrow = document.querySelector('.matrix-white');
let whiteTick = document.querySelector('.white-tick');
let reset = document.querySelector('.reset');
reset.addEventListener('click', () => {
resetButton();
})
document.querySelector('.arrow-container').addEventListener('click', () => {
start();
})
function start(){
arrow.classList.add('send-black-arrow');
whiteArrow.classList.add('send-white-arrow')
whiteTick.classList.add('white-tick-ani')
circle.classList.add('complete-circle');
circleInner.classList.add('complete-circle-fill');
cloud.classList.add('animate-cloud');
reset.classList.add('reset-live');
}
function resetButton(){
arrow.classList.remove('send-black-arrow');
whiteArrow.classList.remove('send-white-arrow')
whiteTick.classList.remove('white-tick-ani')
circle.classList.remove('complete-circle');
circleInner.classList.remove('complete-circle-fill');
reset.classList.remove('reset-live');
cloud.classList.remove('animate-cloud');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.