.png)
Explore creative CSS Ripple Button animations with live preview and copy-ready code for your projects.
<button class="pulse-button">Get Started</button>
.pulse-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007bff; /* Blue Color */
border: none;
border-radius: 50px; /* Rounded pill shape */
cursor: pointer;
position: relative;
outline: none;
transition: all 0.3s ease; /* Smooth transition */
/* Initial subtle glow */
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
/* Animation apply karna */
animation: pulse-animation 2s infinite;
}
/* Hover par thora sa change */
.pulse-button:hover {
background-color: #0056b3;
transform: scale(1.05); /* Thora sa bara hona */
}
/* Pulse Animation ki logic */
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
}
70% {
/* Roshni ka phailna (spread) */
box-shadow: 0 0 0 20px rgba(0, 123, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}
}
<button class="ripple-button">Get Started</button>
.ripple-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #6c5ce7; /* Purple */
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden; /* Ripple hide outside */
transition: all 0.3s ease;
}
/* Hover par button thora scale ho */
.ripple-button:hover {
transform: scale(1.05);
}
/* Ripple element */
.ripple-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
/* Hover par ripple expand */
.ripple-button:hover::before {
width: 300px;
height: 300px;
}
<button class="ripple-button">Get Started</button>
.ripple-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007bff; /* Blue */
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
outline: none;
transition: all 0.3s ease;
}
/* Hover effect */
.ripple-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
/* Ripple circle */
.ripple-button::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
background:rgba(255,255,255,0.6);
border-radius:50%;
transform:translate(-50%,-50%) scale(0);
opacity:0;
}
/* CLICK par ripple run */
.ripple-button:active::after{
animation:ripple-animation 0.6s linear;
}
/* Ripple animation */
@keyframes ripple-animation{
0%{
transform:translate(-50%,-50%) scale(0);
opacity:0.7;
}
70%{
transform:translate(-50%,-50%) scale(4);
opacity:0.3;
}
100%{
transform:translate(-50%,-50%) scale(5);
opacity:0;
}
}
<button class="ripple-button">Get Started</button>
.ripple-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #6f42c1;
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* Hover effect */
.ripple-button:hover {
background-color: #5936a2;
transform: scale(1.05);
}
/* Ripple circle */
.ripple-button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
/* Ripple animation trigger */
.ripple-button:active::after {
animation: rippleFade 0.6s ease-out;
}
/* Animation */
@keyframes rippleFade {
0% {
width: 0;
height: 0;
opacity: 0.6;
}
50% {
width: 200px;
height: 200px;
opacity: 0.4;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
<button class="neon-ripple-btn">Click Me</button>
.neon-ripple-btn{
padding:16px 40px;
font-size:18px;
color:#0ff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
position:relative;
overflow:hidden;
letter-spacing:1px;
box-shadow:0 0 10px #0ff;
transition:0.3s;
}
/* Hover glow */
.neon-ripple-btn:hover{
color:white;
box-shadow:0 0 20px #0ff,0 0 40px #0ff;
}
/* Ripple circle */
.neon-ripple-btn::before{
content:"";
position:absolute;
width:0;
height:0;
border-radius:50%;
background:rgba(0,255,255,0.4);
top:50%;
left:50%;
transform:translate(-50%,-50%);
opacity:0;
}
/* CLICK par ripple run */
.neon-ripple-btn:active::before{
animation:neonRipple 0.8s ease-out;
}
/* Ripple animation */
@keyframes neonRipple{
0%{
width:0;
height:0;
opacity:0.9;
}
70%{
width:220%;
height:220%;
opacity:0.3;
}
100%{
width:220%;
height:220%;
opacity:0;
}
}
<button class="water-ripple-btn">Get Started</button>
.water-ripple-btn{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:white;
background:#007bff;
border:none;
border-radius:50px;
cursor:pointer;
position:relative;
overflow:hidden;
outline:none;
transition:all 0.3s ease;
}
/* Hover effect */
.water-ripple-btn:hover{
background:#0056b3;
transform:scale(1.05);
}
/* Water ripple circles */
.water-ripple-btn::before,
.water-ripple-btn::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
border-radius:50%;
border:2px solid rgba(255,255,255,0.6);
transform:translate(-50%,-50%) scale(0);
opacity:0;
}
/* CLICK par animation run */
.water-ripple-btn:active::before{
animation:waterRipple 0.8s ease-out;
}
.water-ripple-btn:active::after{
animation:waterRipple 0.8s ease-out 0.2s;
}
/* Ripple animation */
@keyframes waterRipple{
0%{
transform:translate(-50%,-50%) scale(0);
opacity:0.8;
}
70%{
transform:translate(-50%,-50%) scale(6);
opacity:0.3;
}
100%{
transform:translate(-50%,-50%) scale(8);
opacity:0;
}
}
<button class="pulse-button">Get Started</button>
.pulse-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007bff;
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
outline: none;
transition: all 0.3s ease;
}
/* Hover */
.pulse-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
/* Explosion ring */
.pulse-button::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:10px;
height:10px;
border-radius:50%;
border:3px solid rgba(255,255,255,0.8);
transform:translate(-50%,-50%) scale(0);
opacity:0;
}
/* Small particles */
.pulse-button::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:6px;
height:6px;
border-radius:50%;
background:white;
transform:translate(-50%,-50%);
box-shadow:
0 -15px white,
0 15px white,
15px 0 white,
-15px 0 white,
10px 10px white,
-10px -10px white,
10px -10px white,
-10px 10px white;
opacity:0;
}
/* Click par animation */
.pulse-button:active::before{
animation:ring-explode 0.6s ease-out;
}
.pulse-button:active::after{
animation:particle-burst 0.6s ease-out;
}
/* Ring expand */
@keyframes ring-explode{
0%{
transform:translate(-50%,-50%) scale(0);
opacity:1;
}
100%{
transform:translate(-50%,-50%) scale(6);
opacity:0;
}
}
/* Particle burst */
@keyframes particle-burst{
0%{
transform:translate(-50%,-50%) scale(0.5);
opacity:1;
}
100%{
transform:translate(-50%,-50%) scale(2);
opacity:0;
}
}
<button class="pulse-button">Get Started</button>
.pulse-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007bff; /* Blue Color */
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
outline: none;
transition: all 0.3s ease;
}
/* Hover effect */
.pulse-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
/* Glow ripple */
.pulse-button::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
border-radius:50%;
background:rgba(255,255,255,0.5);
transform:translate(-50%,-50%) scale(0);
opacity:0;
box-shadow:
0 0 10px rgba(255,255,255,0.8),
0 0 20px rgba(255,255,255,0.6),
0 0 40px rgba(255,255,255,0.4);
}
/* Click par glow ripple */
.pulse-button:active::before{
animation:ripple-glow 0.7s ease-out;
}
/* Animation */
@keyframes ripple-glow {
0%{
transform:translate(-50%,-50%) scale(0);
opacity:0.9;
}
70%{
transform:translate(-50%,-50%) scale(4);
opacity:0.4;
}
100%{
transform:translate(-50%,-50%) scale(6);
opacity:0;
}
}
<button class="ripple-fadein-button">Get Started</button>
.ripple-fadein-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #1E90FF;
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* Hover */
.ripple-fadein-button:hover {
background-color: #1E90FF;
transform: scale(1.05);
}
/* Ripple layer */
.ripple-fadein-button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.35);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
/* Trigger animation */
.ripple-fadein-button:active::after {
animation: rippleFadeIn 0.6s ease-out;
}
/* Animation */
@keyframes rippleFadeIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
50% {
width: 200px;
height: 200px;
opacity: 0.5;
}
100% {
width: 400px;
height: 400px;
opacity: 0.8;
}
}
<button class="ripple-fadein-button">Get Started</button>
.ripple-fadein-button {
padding: 15px 35px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #1E90FF;
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* Hover */
.ripple-fadein-button:hover {
background-color: #1E90FF;
transform: scale(1.05);
}
/* Ripple element */
.ripple-fadein-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
/* Trigger animation */
.ripple-fadein-button:active::before {
animation: rippleFadeIn 0.6s ease-out;
}
/* Animation */
@keyframes rippleFadeIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
40% {
opacity: 0.6;
}
70% {
width: 200px;
height: 200px;
opacity: 0.4;
}
100% {
width: 350px;
height: 350px;
opacity: 0;
}
}