<div class="BOTON DE CORAZON">
<link rel='prefetch' href="https://hihellomonster.github.io/luisangel.maciel/lib/fonts/luisangelmaciel.eot">
<link rel="preload" href="https://hihellomonster.github.io/luisangel.maciel/lib/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://hihellomonster.github.io/luisangel.maciel/lib/style.css"></noscript>
<link data-no-async=”1″ rel="stylesheet" href="https://hihellomonster.github.io/luisangel.maciel/lib/style.css" media="all">
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
body {fill:#E7273F}
.love {
background-color: #E7273F;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
font-family: 'Muli';
font-size: 18px;
letter-spacing: 0.5px;
width: 250px;
}
.love:focus {
outline: none;
}
.love .icon-container {
background-color: #fff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: 1px solid #eee;
color: #E7273F;
padding: 9px 20px;
position: relative;
}
.love .text {
padding: 0 25px;
flex: 1;
text-align: center;
}
.love .grey-text {
display: block;
color: #aaa;
font-size: 12px;
}
.fa-redo {
margin-left: 0px;
}
.heart {
position: absolute;
color: #E7273F;
font-size: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fly 3s linear forwards;
}
@keyframes fly {
to {
transform: translate(-50%, -50px);
}
}
</style>
<button class="love "><span class="icon-container ">
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>love</title>
<path d="M25.577 3.971c-1.646 0.007-3.199 0.766-4.217 2.059-1.018-1.297-2.575-2.054-4.224-2.054-2.965 0-5.369 2.404-5.369 5.369 0 0.001 0 0.001 0 0.002 0 0.127 0 0.253 0 0.38 0.539-0.281 1.118-0.486 1.715-0.605 0.099-1.943 1.704-3.468 3.649-3.468 1.529 0 2.897 0.952 3.427 2.386 0.129 0.328 0.446 0.543 0.798 0.543s0.669-0.215 0.798-0.543c0.543-1.416 1.903-2.35 3.419-2.35 2.022 0 3.662 1.64 3.662 3.662 0 0.911-0.34 1.789-0.952 2.463-0.64 0.703-5.257 6.044-6.93 7.984-1.307-1.511-4.392-5.088-5.995-6.922-0.203-0.054-0.415-0.084-0.625-0.084-0.485 0.002-0.961 0.141-1.371 0.4 1.35 1.525 7.225 8.335 7.288 8.434l0.056 0.063c0.163 0.187 0.399 0.295 0.647 0.296v0c0.248-0.001 0.484-0.108 0.647-0.296l0.049-0.063c0.070-0.077 6.74-7.815 7.492-8.638 0.901-0.989 1.401-2.281 1.401-3.619 0-2.966-2.405-5.375-5.372-5.376l0.007-0.021z"></path>
<path d="M10.523 25.857c-1.673-1.94-6.325-7.281-6.93-7.984-0.612-0.674-0.952-1.553-0.952-2.463 0-2.022 1.64-3.661 3.662-3.661 1.516 0 2.876 0.935 3.419 2.35 0.129 0.328 0.446 0.543 0.798 0.543s0.668-0.216 0.797-0.543c0.533-1.434 1.902-2.386 3.433-2.386 1.755 0 3.264 1.246 3.595 2.97l1.652 1.905c0.086-0.387 0.131-0.783 0.131-1.18 0-2.965-2.405-5.369-5.369-5.369-1.648 0-3.204 0.756-4.222 2.051-1.021-1.208-2.523-1.905-4.104-1.905-2.967 0-5.373 2.406-5.373 5.373 0 1.27 0.451 2.499 1.27 3.468 0.752 0.822 7.421 8.56 7.492 8.638l0.056 0.063c0.161 0.19 0.397 0.301 0.647 0.302v0c0.248 0 0.484-0.108 0.647-0.296l0.056-0.063c0.056-0.063 4.646-5.391 6.648-7.674l-1.131-1.349c-1.526 1.778-4.857 5.622-6.22 7.211z"></path>
</svg>
<i class="icon-etiquetas-codigo "></i></span><span class="text ">Gracias</span></button>
<script>
const love_btns = document.querySelectorAll('.love');
love_btns.forEach(love_btn => {
love_btn.addEventListener('mousedown', (e) => {
love_btn.style.background = '#fff';
love_btn.style.color = '#E7273F';
love_btn.querySelector('.text').innerHTML = '<span class="grey-text">Muchas</span> gracias a ti';
createHearts(love_btn.querySelector('.icon-container'));
});
love_btn.addEventListener('mouseup', (e) => {
love_btn.style.background = '#E7273F';
love_btn.style.color = '#fff';
love_btn.querySelector('.text').innerHTML = '¡Gracias! ';
});
})
function createHearts(container) {
// create 5 hearts
for (let i = 0; i < 15; i++) {
setTimeout(() => {
const heart = document.createElement('span');
heart.classList.add('heart');
heart.innerHTML = '<!-- Generated by IcoMoon.io --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>love</title><path d="M25.577 3.971c-1.646 0.007-3.199 0.766-4.217 2.059-1.018-1.297-2.575-2.054-4.224-2.054-2.965 0-5.369 2.404-5.369 5.369 0 0.001 0 0.001 0 0.002 0 0.127 0 0.253 0 0.38 0.539-0.281 1.118-0.486 1.715-0.605 0.099-1.943 1.704-3.468 3.649-3.468 1.529 0 2.897 0.952 3.427 2.386 0.129 0.328 0.446 0.543 0.798 0.543s0.669-0.215 0.798-0.543c0.543-1.416 1.903-2.35 3.419-2.35 2.022 0 3.662 1.64 3.662 3.662 0 0.911-0.34 1.789-0.952 2.463-0.64 0.703-5.257 6.044-6.93 7.984-1.307-1.511-4.392-5.088-5.995-6.922-0.203-0.054-0.415-0.084-0.625-0.084-0.485 0.002-0.961 0.141-1.371 0.4 1.35 1.525 7.225 8.335 7.288 8.434l0.056 0.063c0.163 0.187 0.399 0.295 0.647 0.296v0c0.248-0.001 0.484-0.108 0.647-0.296l0.049-0.063c0.070-0.077 6.74-7.815 7.492-8.638 0.901-0.989 1.401-2.281 1.401-3.619 0-2.966-2.405-5.375-5.372-5.376l0.007-0.021z"></path><path d="M10.523 25.857c-1.673-1.94-6.325-7.281-6.93-7.984-0.612-0.674-0.952-1.553-0.952-2.463 0-2.022 1.64-3.661 3.662-3.661 1.516 0 2.876 0.935 3.419 2.35 0.129 0.328 0.446 0.543 0.798 0.543s0.668-0.216 0.797-0.543c0.533-1.434 1.902-2.386 3.433-2.386 1.755 0 3.264 1.246 3.595 2.97l1.652 1.905c0.086-0.387 0.131-0.783 0.131-1.18 0-2.965-2.405-5.369-5.369-5.369-1.648 0-3.204 0.756-4.222 2.051-1.021-1.208-2.523-1.905-4.104-1.905-2.967 0-5.373 2.406-5.373 5.373 0 1.27 0.451 2.499 1.27 3.468 0.752 0.822 7.421 8.56 7.492 8.638l0.056 0.063c0.161 0.19 0.397 0.301 0.647 0.302v0c0.248 0 0.484-0.108 0.647-0.296l0.056-0.063c0.056-0.063 4.646-5.391 6.648-7.674l-1.131-1.349c-1.526 1.778-4.857 5.622-6.22 7.211z"></path></svg>';
heart.style.left = Math.random() * 100 + '%';
heart.style.top = Math.random() * 100 + '%';
heart.style.fontSize = Math.random() * 20 + 5 + 'px';
heart.style.animationDuration = Math.random() * 2 + 3 + 's';
container.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 3000);
}, i * 100)
}
}
</script>
<!-- con el div de abajo se cierra el boton de love-->
</div>