Heart Button

HTML
<main role='main'> <i class="fa fa-heart" aria-hidden="true"></i> </main>
SCSS
$link-color: tomato; $text-color: #fff; .fa-heart { cursor: pointer; font-size: 50px; color: $link-color; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #2c3e50; &::before { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all ease-out .6s; color: $link-color; font-size: 100rem; opacity: 0; animation: ease-out .6s; content: '\2764 '; } &.love::before { animation-name: heart; } } main { position: relative; } // Animation @keyframes heart { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
JAVASCRIPT
var button = document.querySelectorAll('.fa')[0]; var body = document.querySelectorAll('body')[0]; button.addEventListener('click', activateLove, false); body.addEventListener('webkitAnimationEnd', disableLove, false); body.addEventListener('animationend', disableLove, false); function activateLove() { body.classList.add('love'); } function disableLove() { body.classList.remove('love'); }
Expand for more options Login