.png)
Explore creative CSS Gradient Button animations with live preview and copy-ready code for your projects.
<button class="gradient-button">Get Started</button>
.gradient-button{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:white;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
/* Gradient Background */
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
/* Gradient ko slide karne ke liye */
background-size:200% 100%;
background-position:left center;
transition:all 0.4s ease;
}
/* Hover Effect */
.gradient-button:hover{
background-position:right center; /* Gradient move karega */
transform:scale(1.05); /* Slight zoom */
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
<button class="gradient-shine">Get Started</button>
.gradient-shine{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#fff;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
/* Base Gradient */
background:linear-gradient(135deg,#ff0080,#7928ca,#007bff);
transition:all 0.3s ease;
}
/* Shine layer */
.gradient-shine::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform:skewX(-25deg);
transition:left 0.6s ease;
}
/* Hover effect */
.gradient-shine:hover::before{
left:140%;
}
.gradient-shine:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
<button class="gradient-border-glow-diagonal">Get Started</button>
.gradient-border-glow-diagonal{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
z-index:1;
transition:all 0.3s ease;
}
/* Diagonal Gradient border layer */
.gradient-border-glow-diagonal::before{
content:"";
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
background:linear-gradient(135deg,#ff0080,#7928ca,#007bff,#ff0080); /* diagonal 135deg */
border-radius:50px;
z-index:-1;
opacity:0;
transition:opacity 0.4s ease;
}
/* Diagonal Glow blur */
.gradient-border-glow-diagonal::after{
content:"";
position:absolute;
top:-6px;
left:-6px;
right:-6px;
bottom:-6px;
background:linear-gradient(135deg,#ff0080,#7928ca,#007bff,#ff0080);
border-radius:50px;
filter:blur(10px);
z-index:-2;
opacity:0;
transition:opacity 0.4s ease;
}
/* Hover */
.gradient-border-glow-diagonal:hover::before,
.gradient-border-glow-diagonal:hover::after{
opacity:1;
}
.gradient-border-glow-diagonal:hover{
transform:scale(1.05);
}
<button class="gradient-border-glow">Get Started</button>
.gradient-border-glow{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
z-index:1;
transition:all 0.3s ease;
}
/* Gradient border layer */
.gradient-border-glow::before{
content:"";
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff,#ff0080);
border-radius:50px;
z-index:-1;
opacity:0;
transition:opacity 0.4s ease;
}
/* Glow blur */
.gradient-border-glow::after{
content:"";
position:absolute;
top:-6px;
left:-6px;
right:-6px;
bottom:-6px;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff,#ff0080);
border-radius:50px;
filter:blur(10px);
z-index:-2;
opacity:0;
transition:opacity 0.4s ease;
}
/* Hover */
.gradient-border-glow:hover::before,
.gradient-border-glow:hover::after{
opacity:1;
}
.gradient-border-glow:hover{
transform:scale(1.05);
}
<button class="animated-gradient-border">Get Started</button>
.animated-gradient-border{
padding:15px 40px;
font-size:18px;
font-weight:bold;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
z-index:1;
transition:all 0.3s ease;
overflow:hidden;
}
/* Animated Gradient Border */
.animated-gradient-border::before{
content:"";
position:absolute;
top:-3px;
left:-3px;
right:-3px;
bottom:-3px;
border-radius:50px;
background:linear-gradient(270deg,#ff0080,#7928ca,#007bff,#ff0080);
background-size:600% 600%; /* Smooth gradient movement */
z-index:-1;
filter:blur(10px);
opacity:0;
transition:opacity 0.4s ease;
animation:gradient-animate 5s linear infinite;
}
/* Hover */
.animated-gradient-border:hover::before{
opacity:1;
}
.animated-gradient-border:hover{
transform:scale(1.05);
}
/* Gradient animation keyframes */
@keyframes gradient-animate {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
<button class="gradient-border-pulse">Get Started</button>
.gradient-border-pulse{
padding:15px 40px;
font-size:18px;
font-weight:bold;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
z-index:1;
overflow:hidden;
transition:all 0.3s ease;
box-shadow:0 0 10px rgba(255,0,128,0.4); /* Soft base glow */
}
/* Outer Gradient Border */
.gradient-border-pulse::before{
content:"";
position:absolute;
top:-3px;
left:-3px;
right:-3px;
bottom:-3px;
border-radius:50px;
background:linear-gradient(45deg,#ff0080,#7928ca,#007bff,#ff0080);
z-index:-1;
filter:blur(15px);
opacity:0.6;
transition:opacity 0.3s ease;
}
/* Inner Glow Pulse */
.gradient-border-pulse::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius:50px;
background:radial-gradient(circle,#ffffff10,#00000000);
z-index:-2;
transition:all 0.3s ease;
}
/* Hover Effect */
.gradient-border-pulse:hover{
transform:scale(1.05);
box-shadow:0 0 25px rgba(255,0,128,0.6);
}
.gradient-border-pulse:hover::before{
opacity:1;
}
.gradient-border-pulse:hover::after{
transform:scale(1.1);
opacity:0.8;
}
<button class="animated-gradient-bg">Get Started</button>
.animated-gradient-bg{
padding:15px 40px;
font-size:18px;
font-weight:bold;
color:#fff;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
background:linear-gradient(270deg,#ff0080,#7928ca,#007bff,#ff0080);
background-size:600% 600%;
transition:all 0.3s ease;
animation:gradient-bg-animation 8s ease infinite;
}
/* Background Animation */
@keyframes gradient-bg-animation {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* Hover Effect */
.animated-gradient-bg:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
<button class="gradient-border-fill"><span>Get Started</span></button>
.gradient-border-fill{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#ff0080;
background:#fff;
border:2px solid transparent;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}
/* Gradient border layer */
.gradient-border-fill::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50px;
padding:2px;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:0;
transition:opacity 0.4s ease;
z-index:0;
}
/* Text above border */
.gradient-border-fill span{
position:relative;
z-index:1;
transition:color 0.3s ease;
}
/* Hover */
.gradient-border-fill:hover::before{
opacity:1;
}
.gradient-border-fill:hover{
color:#fff;
background:#111;
transform:scale(1.05);
}
<button class="gradient-rotate-bg"><span>Get Started</span></button>
.gradient-rotate-bg{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:linear-gradient(0deg, #ff0080, #7928ca, #007bff);
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:transform 0.3s ease, box-shadow 0.3s ease;
background-size:200% 200%;
}
/* Text above */
.gradient-rotate-bg span{
position:relative;
z-index:1;
}
/* Hover effect - rotate background */
.gradient-rotate-bg:hover{
animation:rotate-bg 2s linear infinite;
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
/* Keyframes for gradient rotation */
@keyframes rotate-bg {
0% {
background:linear-gradient(0deg, #ff0080, #7928ca, #007bff);
background-size:200% 200%;
}
50% {
background:linear-gradient(180deg, #ff0080, #7928ca, #007bff);
background-size:200% 200%;
}
100% {
background:linear-gradient(360deg, #ff0080, #7928ca, #007bff);
background-size:200% 200%;
}
}
<button class="gradient-wave-hover"><span>Get Started</span></button>
.gradient-wave-hover{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff,#ff0080);
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:transform 0.3s ease, box-shadow 0.3s ease;
background-size:300% 100%;
}
/* Text above */
.gradient-wave-hover span{
position:relative;
z-index:1;
}
/* Hover effect - animate gradient wave */
.gradient-wave-hover:hover{
animation:wave-bg 2s linear infinite;
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
/* Keyframes for wave animation */
@keyframes wave-bg {
0% {
background-position:0% 50%;
}
50% {
background-position:100% 50%;
}
100% {
background-position:0% 50%;
}
}
<button class="gradient-glow-hover"><span>Get Started</span></button>
.gradient-glow-hover{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
/* Gradient glow layer */
.gradient-glow-hover::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg,#ff0080,#7928ca,#007bff,#ff0080);
filter:blur(20px);
opacity:0;
transition:opacity 0.4s ease;
z-index:0;
}
/* Text above */
.gradient-glow-hover span{
position:relative;
z-index:1;
}
/* Hover effect */
.gradient-glow-hover:hover::before{
opacity:1;
}
.gradient-glow-hover:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
<button class="gradient-ripple"><span>Get Started</span></button>
.gradient-ripple{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
/* Text above */
.gradient-ripple span{
position:relative;
z-index:1;
}
/* Ripple effect layer */
.gradient-ripple::after{
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:50%;
background:radial-gradient(circle, #ff0080, #7928ca, #007bff);
opacity:0;
transform:scale(0);
transition:transform 0.6s ease, opacity 0.6s ease;
z-index:0;
pointer-events:none;
}
/* Hover Ripple */
.gradient-ripple:hover::after{
opacity:0.4;
transform:scale(2.5);
}
.gradient-ripple:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
<button class="gradient-border-anim"><span>Get Started</span></button>
.gradient-border-anim{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:2px solid transparent;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
/* Animated gradient border layer */
.gradient-border-anim::before{
content:"";
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
border-radius:50px;
background:linear-gradient(90deg, #ff0080, #7928ca, #007bff, #ff0080);
z-index:-1;
animation:gradient-border 3s linear infinite;
}
/* Inner mask to show background inside */
.gradient-border-anim::after{
content:"";
position:absolute;
top:2px;
left:2px;
right:2px;
bottom:2px;
border-radius:50px;
background:#111;
z-index:-1;
}
/* Text above */
.gradient-border-anim span{
position:relative;
z-index:1;
transition:color 0.3s ease;
}
/* Hover */
.gradient-border-anim:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
/* Gradient border animation */
@keyframes gradient-border {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}