Party Button
HTML
<div class="wrapper">
<button class="fun-btn">start the party</button>
</div>
CSS
html, body {
margin: 0;
overflow: hidden;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
.color-bg-start {
background-color: salmon;
}
.bg-animate-color {
animation: random-bg .5s linear infinite;
}
@keyframes random-bg {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
.fun-btn {
background-color: tomato;
color: white;
padding: 2em 3em;
border: none;
transition: all .3s ease;
border-radius: 5px;
letter-spacing: 2px;
text-transform: uppercase;
outline: none;
align-self: center;
cursor: pointer;
font-weight: bold;
font-size: 20px;
}
.fun-btn:hover {
animation: random-bg .5s linear infinite, grow 1300ms ease infinite;
}
.start-fun {
background-color: #fff !important;
color: salmon !important;
}
@keyframes grow {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
JAVASCRIPT
$('.fun-btn').on('click', function(event) {
$(this).toggleClass('start-fun');
var $page = $('.wrapper');
$page.toggleClass('color-bg-start')
.toggleClass('bg-animate-color');
$(this).hasClass('start-fun') ?
$(this).text('stop the party') :
$(this).text('start the party');
});
