This post contains a total of 10+ Hand-Picked JavaScript Button Click Effect Examples with Source Code. All the Buttons have Click Effects and are made using JavaScript & Styled using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
Click a Code to Copy it.
1. By Marian Ban
Made by Marian Ban. JavaScript Button with cool vibrating animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
:root {
--bg: hsla(228, 57%, 54%, 1);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: grid;
height: 100vh;
width: 100vw;
place-items: center;
}
.app {
display: grid;
place-items: center;
position: relative;
filter: url(#filter);
height: 30em;
width: 30em;
overflow: visible;
}
svg {
visibility: hidden;
}
.btn {
filter: url(#filter);
font-size: 1em;
font-weight: 400;
-webkit-appearance: none;
appearance: none;
background: var(--bg);
color: white;
border-radius: 0.5em;
border: none;
padding: 1em 2em;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: box-shadow 150ms ease-in-out, background 0.3s ease-in-out;
outline: none;
grid-area: 1/1;
}
.btn:hover {
background-color: #253988;
}
.btn:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.circle {
content: "";
width: 30em;
height: 30em;
border-radius: 50%;
border: 2px solid var(--bg);
transform-origin: center center;
grid-area: 1/1;
opacity: 0;
pointer-events: none;
}
.circle.circle-animation {
animation: animate var(--duration) cubic-bezier(0.215, 0.61, 0.355, 1);
animation-delay: calc((var(--i) / 10) * var(--duration));
}
@keyframes animate {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div>
<div class="app">
<button class="btn">Click Me</button>
<div class="circle" style="--i: 1"></div>
<div class="circle" style="--i: 2"></div>
<div class="circle" style="--i: 3"></div>
<div class="circle" style="--i: 4"></div>
<div class="circle" style="--i: 5"></div>
</div>
</div>
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="filter">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0"
numOctaves="1" result="noise" />
<feDisplacementMap in2="noise" in="SourceGraphic"
scale="30" xChannelSelector="R" yChannelSelector="R"/>
<feDisplacementMap in2="noise"
scale="-30" xChannelSelector="R" yChannelSelector="R"/>
</filter>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js'></script>
<script>
var btn = document.querySelector('.btn');
btn.addEventListener('click', animate);
var turbulence = d3.
select('#turbulence');
var circles = d3.selectAll('.circle');
var duration = 750;
var app = d3.select('.app');
app.style("--duration", duration + 'ms');
function animate() {
circles.classed('circle-animation', true);
// safari specific hack
app.style('filter', 'url(#filter)');
turbulence.
attr('baseFrequency', 0.08).
transition().
duration(duration).
attr('baseFrequency', 0.04).
transition().
duration(duration * 2).
attr('baseFrequency', 0).
on('end', () => {
circles.classed('circle-animation', false);
// force filter rest in safari
app.style('filter', 'none');
});
}
</script>
</body>
</html>2. By Arcadie Căldare
Made by Arcadie Căldare. Google style button with click splash effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
outline: none;
font-family: sans-serif;
}
body{
background: #f4f4f4;
}
.button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 70px;
background: #4285f4;
line-height: 70px;
color: #fff;
text-align: center;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 5px 10px 3px rgba(0, 0, 0, .1);
overflow: hidden;
}
.button #splash{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0px;
height: 0px;
background: rgba(255, 255, 255, .2);
transform: translate(-50%, -50%);
border-radius: 50%;
transition: .5s ease-out;
}
</style>
<body>
<div class="button" onmousedown="buttonClick()">
Click me!
<div id="splash"></div>
</div>
<script>
var ableToClick = true;
function buttonClick() {
if (!ableToClick) return;
ableToClick = false;
let splash = document.getElementById("splash");
splash.style.width = "300px";
splash.style.height = "300px";
setTimeout(function () {
splash.style.opacity = "0";
}, 400);
setTimeout(function () {
splash.style.transitionDuration = "0s";
}, 1000);
setTimeout(function () {
splash.style.width = "0";
splash.style.height = "0";
splash.style.opacity = "1";
}, 1100);
setTimeout(function () {
ableToClick = true;
splash.style.transitionDuration = ".5s";
}, 1200);
}
</script>
</body>
</html>3. By Lucas Gruwez
Made by Lucas Gruwez. Buttons with loading and click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
<style>
* {
box-sizing: border-box;
}
input {
cursor: pointer;
}
body {
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
input[role=submit] {
border: 2px solid #1ECD97;
background-color: transparent;
height: 60px;
line-height: 20px;
color: #1ECD97;
padding: 0;
width: 200px;
text-align: center;
border-radius: 200px;
font-size: 20px;
transition: all 200ms ease-in-out;
}
input[role=submit]:focus {
outline: 0;
}
input[role=submit]:hover {
background-color: #1ECD97;
color: #fff;
outline: 0;
}
input[role=submit]:active {
font-size: 24px;
outline: 0;
}
input[role=submit].clicked {
color: transparent;
background-color: transparent;
width: 60px;
border-width: 5px;
border-color: #ddd;
-webkit-animation: turn 5s linear;
animation: turn 5s linear;
border-top-color: #1ECD97;
}
input[role=submit].done, input[role=submit].done:hover {
background-color: #1ECD97;
color: #fff;
font-family: "FontAwesome";
font-size: 40px;
position: relative;
}
@-webkit-keyframes turn {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #1ECD97;
}
100% {
border-color: #1ECD97;
background-color: #1ECD97;
}
}
@keyframes turn {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #1ECD97;
}
100% {
border-color: #1ECD97;
background-color: #1ECD97;
}
}
input[role=delete] {
border: 2px solid #FC4236;
background-color: transparent;
height: 60px;
line-height: 20px;
color: #FC4236;
padding: 0;
width: 200px;
text-align: center;
border-radius: 200px;
font-size: 20px;
transition: all 200ms ease-in-out;
}
input[role=delete]:focus {
outline: 0;
}
input[role=delete]:hover {
background-color: #FC4236;
color: #fff;
outline: 0;
}
input[role=delete]:active {
font-size: 24px;
outline: 0;
}
input[role=delete].clicked {
color: transparent;
background-color: transparent;
width: 60px;
border-width: 5px;
border-color: #ddd;
-webkit-animation: turn-del 5s linear;
animation: turn-del 5s linear;
border-top-color: #FC4236;
}
input[role=delete].done, input[role=delete].done:hover {
background-color: #FC4236;
color: #fff;
font-family: "FontAwesome";
font-size: 40px;
position: relative;
}
@-webkit-keyframes turn-del {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #FC4236;
}
100% {
border-color: #FC4236;
background-color: #FC4236;
}
}
@keyframes turn-del {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #FC4236;
}
100% {
border-color: #FC4236;
background-color: #FC4236;
}
}
input[role=send] {
border: 2px solid #4388FF;
background-color: transparent;
height: 60px;
line-height: 20px;
color: #4388FF;
padding: 0;
width: 200px;
text-align: center;
border-radius: 200px;
font-size: 20px;
transition: all 200ms ease-in-out;
}
input[role=send]:focus {
outline: 0;
}
input[role=send]:hover {
background-color: #4388FF;
color: #fff;
outline: 0;
}
input[role=send]:active {
font-size: 24px;
outline: 0;
}
input[role=send].clicked {
color: transparent;
background-color: transparent;
width: 60px;
border-width: 5px;
border-color: #ddd;
-webkit-animation: turn-send 5s linear;
animation: turn-send 5s linear;
border-top-color: #4388FF;
}
input[role=send].done, input[role=send].done:hover {
background-color: #4388FF;
color: #fff;
font-family: "FontAwesome";
font-size: 40px;
position: relative;
}
@-webkit-keyframes turn-send {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #4388FF;
}
100% {
border-color: #4388FF;
background-color: #4388FF;
}
}
@keyframes turn-send {
10% {
transform: rotateZ(0deg);
}
55% {
transform: rotatez(360deg);
}
99% {
transform: rotateZ(720deg);
background-color: transparent;
border-color: #ddd;
border-top-color: #4388FF;
}
100% {
border-color: #4388FF;
background-color: #4388FF;
}
}
</style>
</head>
<body>
<input type="submit" role="submit"/>
<input type="button" role="delete" value="Delete"/>
<input type="button" role="send" value="Send"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
$('input[role="submit"]').click(function () {
var $t = $(this);
var hasClass = $t.hasClass('done');
if (!hasClass) {
$(this).addClass('clicked');
setTimeout(function () {
$t.removeClass('clicked').addClass('done').attr({
value: '' });
}, time());
} else if (hasClass) {
$t.removeClass().attr({
value: 'Submit' });
}
});
$('input[role="delete"]').click(function () {
var $t = $(this);
var hasClass = $t.hasClass('done');
if (!hasClass) {
$(this).addClass('clicked');
setTimeout(function () {
$t.removeClass('clicked').addClass('done').attr({
value: '' });
}, time());
} else if (hasClass) {
$t.removeClass().attr({
value: 'Delete' });
}
});
$('input[role="send"]').click(function () {
var $t = $(this);
var hasClass = $t.hasClass('done');
if (!hasClass) {
$(this).addClass('clicked');
setTimeout(function () {
$t.removeClass('clicked').addClass('done').attr({
value: '' });
}, time());
} else if (hasClass) {
$t.removeClass().attr({
value: 'Send' });
}
});
function time() {
return 3000 + Math.random() * 2000;
}
</script>
</body>
</html>4. By Tommy
Made by Tommy. Button with ripple effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, button {
font-family: monospace;
}
.button {
display: block;
position: relative;
width: 300px;
background: #fff;
color: #000;
box-sizing: border-box;
border: 2px solid #000;
border-radius: 3px;
font-size: 20px;
text-align: center;
margin: 50px auto 0;
padding: 15px 0px;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s;
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2);
}
.button .ripple {
display: block;
position: absolute;
background: #F00;
border-radius: 50%;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
transform: scale(0);
opacity: 0.4;
animation: effect-animation 1.6s;
}
.button:hover {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6);
}
@keyframes effect-animation {
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<a href="#" class="button btn-effect">Click me</a>
<button class="button btn-effect">Click me </button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$(".btn-effect").on("click", function (e) {
e.preventDefault();
$(this).prepend('<span class="ripple"></span>');
debugger;
let $ripple = $(".ripple"),
offSet = $(this).offset(),
offSetY = e.pageY - offSet.top,
offSetX = e.pageX - offSet.left;
console.log(offSetY, offSetX);
$ripple.css({
top: offSetY,
left: offSetX });
// setTimeout(() => {
// $ripple.remove();
// }, 2000);
});
</script>
</body>
</html>5. By Ivelin
Made by Ivelin. Button with click to activate effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 {
font-family:Arial, Helvetica;
color:#003000;
text-align:center;
margin:60px 0 50px;
}
.box { position:relative; width:150px; margin:auto;
box-shadow:-3px -5px 6px #d9d9d9; margin:50px auto; cursor:pointer; font-size:13px; height:75px; overflow:hidden; }
.box span { position:relative; display:block; background:#00aa00; padding:30px 0; color:#fff; text-align:center; text-transform:uppercase; font-family:sans-serif; }
.box span.clicked { background-color:#017001; }
.box span.click { opacity:1; }
.box span.clicked { top:0; animation:clicked 1s 1 forwards; }
@keyframes clicked{
0% { top:0; }
50% { top:-120% }
100% { top:-100% }
};
</style>
</head>
<body>
<h1>Please click the button to activate...</h1>
<div class="box">
<span class="click">Click Me</span>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script id="rendered-js" >
$('span.click').on('click', function () {
$('<span class="clicked">Clicked</span>').insertAfter(this);
});
</script>
</body>
</html>6. By Sparshcodes
Made by Sparshcodes. Simple JavaScript button with click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0;
height:100vh;
display:grid;
place-items:center;
background-color:#eee;
}
.ripple-btn{
text-decoration:none;
background-color:#5c6e90;
color:#fff;
padding:20px 40px;
border-radius:30px;
font-family:verdana;
font-size:20px;
text-transform:capitalize;
cursor:pointer;
overflow:hidden;
position:relative;
}
.ripple-btn span{
position:absolute;
background-color:#fff;
transform:translate(-50%,-50%);
border-radius:50%;
pointer-events:none;
animation: rippleEffect 1.5s 1;
}
@keyframes rippleEffect{
from{
width:0;
height:0;
opacity:0.7;
}
to{
width:500px;
height:500px;
opacity:0;
}
}
</style>
</head>
<body>
<a href="#" class="ripple-btn">click here</a>
<script>
const rippleBtn = document.querySelector(".ripple-btn");
rippleBtn.addEventListener('click', e => {
let ripples = document.createElement('span');
const horizontalPos = e.clientX - e.target.offsetLeft;
const verticalPos = e.clientY - e.target.offsetTop;
ripples.style.left = horizontalPos + "px";
ripples.style.top = verticalPos + "px";
rippleBtn.appendChild(ripples);
setTimeout(() => {
ripples.remove();
}, 1500);
});
</script>
</body>
</html>7. By ApplePieGiraffe
Made by ApplePieGiraffe. Button with Ripple click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button {
position: relative;
border: none;
border-radius: 10rem;
padding: .5rem 3.25rem;
background-color: #5175FF;
color: white;
font-size: 1.5rem;
font-family: 'Kumbh Sans', sans-serif;
line-height: 3.5rem;
cursor: pointer;
outline: none;
overflow: hidden;
transition: .3s;
}
button:hover {
background-color: #829CFF;
}
.ripple {
position: absolute;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: white;
pointer-events: none;
opacity: .5;
animation: ripple .5s linear;
}
@keyframes ripple {
to {
width: 15rem;
height: 15rem;
opacity: 0;
}
}
</style>
</head>
<body>
<button>Click me.</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', createRipple);
function createRipple(e) {
let btn = e.target;
let boundingBox = btn.getBoundingClientRect();
let x = e.clientX - boundingBox.left;
let y = e.clientY - boundingBox.top;
let ripple = document.createElement('span');
ripple.classList.add('ripple');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
btn.appendChild(ripple);
ripple.addEventListener('animationend', () => {ripple.remove();});
}
</script>
</body>
</html>8. By Boundless
Made by Boundless. Cool Button Click Effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #282828;
}
div.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
button {
cursor: pointer;
margin: 10px;
position: relative;
overflow: hidden;
padding: 15px 30px;
font-size: 40px;
background-color: transparent;
border: none;
outline: none;
color: white;
transition: 0.2s;
}
button::before {
content: "";
height: 3px;
width: 0;
left: 0;
bottom: 0;
position: absolute;
background: white;
transition: 0.4s;
}
button:hover::before {
width: 100%;
}
button:active {
background-color: rgba(255, 255, 255, 0.1);
}
span.ripple {
background-color: rgba(0, 190, 255, 0.7);
border-radius: 50%;
position: absolute;
transform: scale(0);
animation: ripple 0.5s linear forwards;
}
@keyframes ripple {
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body translate="no" >
<div class="container">
<button class="r-btn">Click Me</button>
<button class="r-btn">Click Me</button>
<button class="r-btn">Click Me</button>
</div>
<script>
var buttons = document.querySelectorAll('.r-btn');
Array.prototype.forEach.call(buttons, function (b) {
b.addEventListener('click', createRipple);
});
function createRipple(event) {
var ripple = document.createElement('span');
ripple.classList.add('ripple');
var max = Math.max(this.offsetWidth, this.offsetHeight);
ripple.style.width = ripple.style.height = max * 2 + 'px';
var rect = this.getBoundingClientRect();
ripple.style.left = event.clientX - rect.left - max + 'px';
ripple.style.top = event.clientY - rect.top - max + 'px';
this.appendChild(ripple);
}
</script>
</body>
</html>9. By param deol
Made by param deol. Button with hover effect and click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #2e3131;
}
body button {
width: 180px;
height: 32px;
background: black;
border: 0.5px solid darkslategrey;
outline: none;
border-radius: 5px;
color: yellow;
padding: 12px;
box-shadow: 0px 4px 22px 17px black;
cursor: pointer;
margin-left: 40%;
margin-top: 25%;
letter-spacing: 2px;
transition: all 0.2, transform 0.1s;
}
body button:active {
transform: translate3d(5px);
box-shadow: 0px 4px 22px 17px grey !important;
}
body button:hover {
color: white;
border: 0.5px solid yellow;
}
body button:hover .visible {
top: 0px;
display: none;
}
body button:hover .hidden {
display: block;
top: -18px;
}
body button .hidden {
position: relative;
top: -50px;
display: none;
}
body button .visible {
display: block;
position: relative;
top: -17px;
}
</style>
</head>
<body>
<button onclick="handleClick()">
<p class="hidden">Click Me :|</p>
<p class="visible">Wanna see magic?</p>
</button>
<script>
function handleClick()
{
}
</script>
</body>
</html>10. By spandan joshi
Made by spandan joshi. JavaScript button with bubble effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.middle{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.confetti-button {
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
font-size: 1em;
padding: 1em 2em;
margin-top: 100px;
margin-bottom: 60px;
-webkit-appearance: none;
appearance: none;
background-color: #ff0081;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.confetti-button:focus { outline: 0; }
.confetti-button:before, .confetti-button:after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
.confetti-button:before {
display: none;
top: -75%;
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
}
.confetti-button:after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.confetti-button:active {
transform: scale(0.9);
background-color: #e60074;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.confetti-button.animate:before {
display: block;
animation: topBubbles ease-in-out 0.75s forwards;
}
.confetti-button.animate:after {
display: block;
animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes
topBubbles { 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%;
}
100% {
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%;
}
}
@keyframes
bottomBubbles { 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%;
}
100% {
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%;
}
}
</style>
</head>
<body>
<div class="middle">
<button class="confetti-button">Click me!</button>
</div>
</body>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
var animateButton = function (e) {
e.preventDefault;
//reset animation
e.target.classList.remove('animate');
e.target.classList.add('animate');
setTimeout(function () {
e.target.classList.remove('animate');
}, 700);
};
var classname = document.getElementsByClassName("confetti-button");
for (var i = 0; i < classname.length; i++) {if (window.CP.shouldStopExecution(0)) break;
classname[i].addEventListener('click', animateButton, false);
}window.CP.exitedLoop(0);
</script>
</body>
</html>11. By Mash Codee
Made by Mash Codee. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
min-height:100vh;
padding:0;
margin:0;
background:#ddd;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
font-family:sans-serif;
}
a{
width:30rem;
height:4rem;
background:#3451F5;
color:#fff;
text-align:center;
line-height:2rem;
font-size:3rem;
margin:1rem 0;
padding:1rem 0;
border-radius:2rem;
box-sizing:border-box;
font-weight:500;
user-select:none;
position:relative;
overflow: hidden;
}
span{
transform:translate(-50%,-50%);
position:absolute;
animation: scalling .5s linear 1;
border-radius:50%;
}
@keyframes scalling{
0%{
width: 0;
height: 0;
background:rgba(255,255,255,0.8);
}
100%{
width: 50rem;
height: 50rem;
background:rgba(255,255,255,0);
}
}
</style>
</head>
<body>
<a>Home</a>
<a>About</a>
<script>
const buttons = document.querySelectorAll('a');
buttons.forEach(a => {
a.addEventListener('click', e => {
let ripples = document.createElement('span');
a.appendChild(ripples);
ripples.style.left = e.clientX - e.target.offsetLeft + document.body.scrollLeft + 'px';
ripples.style.top = e.clientY - e.target.offsetTop + 'px';
ripples.addEventListener('animationend', () => {
ripples.remove();
});
});
});
</script>
</body>
</html>