This post contains a total of 5+ Hand-Picked JavaScript Gradient Button Examples with Source Code. All the Gradient Buttons are made using JavaScript & Styled using CSS.
You can use the source code of these examples for educational purpose with credits to the original owner.
Related Posts
Click a Code to Copy it.
1. By smpnjn
Made by smpnjn. Javscript Gradient Buttons with Transitions. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: rgb(15 19 22);
padding: 2rem;
}
#gradient-button, #gradient-button-transition, #complex-gradient-transition {
background: linear-gradient(180deg, #ff7147, #e0417f);
padding: 0.5rem 1.5rem;
transition: all 0.1s ease-out;
font-variation-settings: 'wght' 500;
height: auto;
border-radius: 100px;
border: none;
color: white;
font-size: 1.25rem;
box-shadow: none;
transform: scale(1);
margin: 0 0 2rem 1rem;
}
#gradient-button:hover {
background: linear-gradient(45deg, #0037ff, #00adff);
transform: scale(1.1);
}
#gradient-button-transition:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="fl">
<button id="gradient-button">Native CSS Gradient Transition..</button>
</div>
<div class="fl">
<button id="gradient-button-transition">Hover over me to Transition Smoothly..</button>
</div>
<div class="fl"><button id="complex-gradient-transition">Automatic Gradient Transition</button></div>
<script>
let complexTransitionTime = 3000; // <-- for complex animation
let transitionTime = 1000; // <-- 100 ms - time our animation will last
let previousTime,start = 0; // <-- stores data on animation
let angle = 180; // <-- angle of gradient
let animationDirection = 'forwards'; // <-- stores the animation direction
let complexAnDirection = 'forwards'; // <-- for continuous animation
let element = 'gradient-button-transition'; // <-- id of our button
let intervalFrame; // <-- stores the interval frame
let complexIntervalFrame; // <-- for 'always on' gradient transition
let currentPct = 0; // <-- current percentage through the animation
let complexCurrentPct = 0; // <-- current pct for complex animation
let elapsed = 0; // <-- number of frames which have ellapsed
let complexElapsed = 0; // <-- complex elapsed time
// GRADIENT COLORS
const gradientStopOne = [
{ pct: 0, color: { r: 255, g: 113, b: 71 } }, // The first color in your gradient
{ pct: 100, color: { r: 0, g: 55, b: 255 } } // The color you want your first color to transition to
];
const gradientStopTwo = [
{ pct: 0, color: { r: 224, g: 65, b: 127 } }, // The second color in your gradient
{ pct: 100, color: { r: 0, g: 173, b: 255 } } // The color you want your second color to transition to
];
const complexGradientOne = [
{ pct: 0, color: { r: 224, g: 65, b: 127 } },
{ pct: 33, color: { r: 0, g: 173, b: 255 } },
{ pct: 66, color: { r: 203, g: 252, b: 5 } },
{ pct: 100, color: { r: 98, g: 5, b: 252 } }];
const complexGradientTwo = [
{ pct: 0, color: { r: 255, g: 113, b: 71 } },
{ pct: 33, color: { r: 0, g: 55, b: 255 } },
{ pct: 66, color: { r: 30, g: 177, b: 7 } },
{ pct: 100, color: { r: 228, g: 44, b: 200 } }];
// Apply our gradient programmatically so we can completely manipulate the gradient from JS rather than CSS
let c1 = gradientStopOne[0].color;
let c2 = gradientStopTwo[0].color;
document.getElementById('gradient-button-transition').style.background = `linear-gradient(${angle}deg, rgb(${c1.r}, ${c1.g}, ${c1.b}), rgb(${c2.r}, ${c2.g}, ${c2.b}))`;
// This function transitions between two rgb colors
const getColor = function (pct, colorSet) {
for (var i = 1; i < colorSet.length - 1; i++) {
if (pct < colorSet[i].pct) {
break;
}
}
// This conversion figures out the transition between two rgb values
var lower = colorSet[i - 1];
var upper = colorSet[i];
var range = upper.pct - lower.pct;
var rangePct = (pct - lower.pct) / range;
var pctLower = 1 - rangePct;
var pctUpper = rangePct;
var color = {
r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper) };
// And returns the rgb code
return `rgb(${color.r}, ${color.g}, ${color.b})`;
};
// This is our animation which we run on hover
const animateGradient = function () {
if (intervalFrame === undefined) {
intervalFrame = setInterval(() => {
let time = transitionTime / 1000; // time in seconds
let numberOfFrames = time * 60; // 60 frames per second -> 1 second = 60 frames
// If the animation is going forward
if (animationDirection === 'forwards') {
// Add 1 to elapsed
elapsed += 1;
// The elapsed frames out of max frames
currentPct = Math.min(elapsed / numberOfFrames, 1) * 100;
} else
{
// Otherwise we're going back - subtract 1 from ellapsed
elapsed -= 1;
// The elapsed frames out of max frames
currentPct = Math.max(elapsed / numberOfFrames, 0) * 100;
}
// Calculate current color in this time for each gradient color
let colorOne = getColor(currentPct, gradientStopOne);
let colorTwo = getColor(currentPct, gradientStopTwo);
// Generate CSS string
let generateGradient = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
// Add it to our background.
document.getElementById(element).style.backgroundImage = generateGradient;
// End the interval when we're done
if (currentPct === 100 || currentPct === 0) {
clearInterval(intervalFrame);
intervalFrame = undefined;
}
}, 16.667); // 60 frames per second
}
};
// This is our animation which we run on hover
const complexGradientAnimation = function () {
if (complexIntervalFrame === undefined) {
complexIntervalFrame = setInterval(() => {
let time = complexTransitionTime / 1000;
let numberOfFrames = time * 60; // 60 frames per second -> 1 second = 60 frames
if (complexCurrentPct === 100) {
complexAnDirection = 'backwards';
} else
if (complexCurrentPct === 0) {
complexAnDirection = 'forwards';
}
// If the animation is going forward
if (complexAnDirection == 'forwards') {
// Add 1 to elapsed
complexElapsed += 1;
// The elapsed frames out of max frames
complexCurrentPct = Math.min(complexElapsed / numberOfFrames, 1) * 100;
} else
if (complexAnDirection === 'backwards') {
// Otherwise we're going back - subtract 1 from ellapsed
complexElapsed -= 1;
// The elapsed frames out of max frames
complexCurrentPct = Math.max(complexElapsed / numberOfFrames, 0) * 100;
}
// Calculate current color in this time for each gradient color
let colorOne = getColor(complexCurrentPct, complexGradientOne);
let colorTwo = getColor(complexCurrentPct, complexGradientTwo);
// Generate CSS string
let generateGradient = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
// Add it to our background.
document.getElementById('complex-gradient-transition').style.backgroundImage = generateGradient;
}, 16.667); // 60 frames per second
}
};
// On hover, run our animation
document.getElementById('gradient-button-transition').addEventListener('mouseover', function () {
animationDirection = 'forwards';
animateGradient();
});
// On hover out, run our animation again, but backwards
document.getElementById('gradient-button-transition').addEventListener('mouseleave', function () {
animationDirection = 'backwards';
animateGradient();
});
complexGradientAnimation();
</script>
</body>
</html>2. By Rahmat
Made by Rahmat. Simple buttons with gradient effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
background-color: #dbe3e6;
}
.container {
display: flex;
width: 60vw;
height: 220px;
min-width: 200px;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
transform: translate(-50%, -50%);
}
.gradient-button {
display: block;
height: 50px;
width: 200px;
font-size: 1rem;
font-family: "Helverica", "Roboto", sans-serif;
font-weight: 400;
border: 0px;
background-color: #2aec9c;
position: relative;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.27);
}
button {
margin: 0 1rem;
min-width: 150px;
}
.gradient-button::before {
content: '';
display: block;
height: 300px;
width: 300px;
position: absolute;
top: -125px;
left: -50px;
background: radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%);
-webkit-animation: rotateGradient 5s linear infinite;
animation: rotateGradient 5s linear infinite;
}
.gradient-button::after {
content: 'BUTTON A';
display: flex;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
color: #FFF;
font-weight: 400;
letter-spacing: 1px;
justify-content: center;
align-items: center;
}
@-webkit-keyframes rotateGradient {
to {
transform: rotate(360deg);
}
}
@keyframes rotateGradient {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
to {
transform: rotate(-360deg);
}
}
@keyframes rotate {
to {
transform: rotate(-360deg);
}
}
.another-button {
display: flex;
width: 200px;
height: 50px;
border: 0px;
border-radius: 3px;
font-family: "Roboto", sans-serif;
flex-direction: column;
font-size: 1rem;
font-weight: 500;
justify-content: center;
align-items: center;
background-color: #2eeccc;
/* background-color: #1abc9c; */
position: relative;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.27);
}
button:focus {
outline: none;
}
button {
cursor: pointer;
}
.another-button:after {
content: '';
display: block;
width: auto;
height: 3px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 0 0 3px 3px;
transform: scaleX(1);
background-color: #E2DF28;
transition: transform 0.17s;
}
</style>
</head>
<body>
<div class="container">
<button class="gradient-button"></button>
<button class="another-button">BUTTON B</button>
</div>
<script>
const btnB = document.querySelector(".another-button");
</script>
</body>
</html>3. By Etienne UGIRA
Made by Etienne UGIRA. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;
padding: 0;
background: #000;
animation: animate 8s linear infinite;
}
a
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
a:hover
{
animation: animate 8s linear infinite;
}
@keyframes animate
{
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
a:before
{
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: .5s;
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
a:hover:before
{
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>
</head>
<body>
<a href="#">TRADE NOW</a>
</body>
</html>
<script>
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
</script>
</body>
</html>4. By Remiscan
Made by Remiscan. Button with gradient border and text + transparent background. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* Button examples */
gradient-button {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
margin: .5em;
--hover-text-color: black;
}
gradient-button:nth-of-type(4n+1) {
--gradient: linear-gradient(135deg,
#ff5d4b calc(1 * 100% / 7),
#ff8d00 calc(2 * 100% / 7),
#ffee00 calc(3 * 100% / 7),
#51b859 calc(4 * 100% / 7),
#5997ff calc(5 * 100% / 7),
#d36ee7 calc(6 * 100% / 7) 100%
);
}
gradient-button:nth-of-type(4n+2) {
--gradient: linear-gradient(to right,
#7CCDF6 0%,
#EAAEBA calc(1 * 100% / 4),
#FFFFFF calc(2 * 100% / 4),
#EAAEBA calc(3 * 100% / 4),
#7CCDF6 100%
);
}
gradient-button:nth-of-type(4n+3) {
--gradient: linear-gradient(to bottom,
#f95f9c 0%,
#c583c7 35% 65%,
#6999ff 100%
);
}
gradient-button:nth-of-type(4n+4) {
--gradient: linear-gradient(135deg,
#f86e4f 0% calc(1 * 100% / 8),
#e48142 calc(2 * 100% / 8),
#F19E63 calc(3 * 100% / 8),
#FFFFFF calc(4 * 100% / 8),
#d67bb5 calc(5 * 100% / 8),
#d080b3 calc(6 * 100% / 8),
#e86ea9 calc(7 * 100% / 8) 100%
);
}
/* For presentation purposes */
* { -webkit-tap-highlight-color: transparent; }
html, body {
height: 100%;
margin: 0;
color-scheme: light dark;
}
body {
background-color: hsl(250, 40%, 30%);
background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25% 75%, rgba(0, 0, 0, .1) 75%),
linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25% 75%, rgba(0, 0, 0, .1) 75%);
background-size: 64px 64px;
background-position: 0 0, 32px 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
a {
color: white;
opacity: .7;
position: absolute;
bottom: 1em;
}
</style>
</head>
<body>
<p>
<gradient-button text="Hello!"></gradient-button>
<gradient-button text="How are you?"></gradient-button>
<gradient-button text="This is"></gradient-button>
<gradient-button text="gradient-button"></gradient-button>
<p>
<gradient-button style="--border-width: 0;" text="No border"></gradient-button>
<gradient-button style="--border-width: 1px;" text="1px border"></gradient-button>
<gradient-button style="--border-width: .2em;" text="0.2em border"></gradient-button>
<p>
<gradient-button style="--padding: .25em .5em;" text="Smaller padding"></gradient-button>
<gradient-button style="--padding: .75em 1.5em;" text="Bigger padding"></gradient-button>
<p>
<a href="https://codepen.io/remiscan/pen/oNxadpR" target="_parent">CSS only version (without rounded corners 😢)</a>
<script src='https://unpkg.com/construct-style-sheets-polyfill'></script>
<script>
// Needs adoptedStyleSheets support
// (polyfill: https://unpkg.com/construct-style-sheets-polyfill)
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
:host {
display: inline-grid;
position: relative;
font-family: system-ui;
font-weight: 600;
/* --- Customizable properties --- */
/* Background & text gradient */
--gradient: linear-gradient(to right, royalblue 0% 100%);
/* Width of the gradient border */
--border-width: 2px;
/* Padding around text */
--padding: .5em 1em;
/* Color of text on hover */
--hover-text-color: black;
/* Overlay over background on click */
--active-background-overlay: linear-gradient(to right, rgba(0, 0, 0, .1) 0% 100%);
/* Transition duration */
--transition-duration: .1s;
}
:host(:not([text])) {
opacity: 0;
}
/* Native button functionality */
button {
grid-row: 1;
grid-column: 1;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
font: inherit;
padding: 0;
margin: 0;
display: grid;
place-items: center;
border-radius: var(--border-radius);
outline-offset: 1px;
}
/* Border and text sharing the same gradient */
.border,
.gradient-text,
.hover-bg {
display: block;
width: 100%;
height: 100%;
background-image: var(--gradient);
grid-row: 1;
grid-column: 1;
}
.border {
mask: var(--mask);
mask-size: 100% 100%;
-webkit-mask: var(--mask);
-webkit-mask-size: 100% 100%;
z-index: 0;
}
.gradient-text {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
display: grid;
place-items: center;
z-index: 1;
user-select: none;
}
.hover-bg {
transition: opacity var(--transition-duration) linear;
border-radius: var(--border-radius);
z-index: 2;
}
button:not(:hover):not(:focus):not(:active) > .hover-bg {
opacity: 0;
}
button:active > .hover-bg {
background-image: var(--active-background-overlay), var(--gradient);
}
.hover-text {
display: block;
width: 100%;
height: 100%;
grid-row: 1;
grid-column: 1;
box-sizing: border-box;
color: var(--hover-text-color);
display: grid;
place-items: center;
z-index: 3;
transition: color var(--transition-duration) linear;
}
button:not(:hover):not(:focus):not(:active) > .hover-text {
--hover-text-color: transparent;
}
button:active > .hover-text {
transition-duration: 0s;
}
.text {
white-space: nowrap;
}
.gradient-text > .text {
padding: var(--padding);
margin: var(--border-width);
}
.border-width-checker {
display: block;
height: 0;
width: var(--border-width, 0);
position: absolute;
pointer-events: none;
}
`);
const template = document.createElement('template');
template.innerHTML = `
<button part="button">
<span class="border" part="border" aria-hidden="true"></span>
<span class="gradient-text" part="gradient-text" aria-hidden="true">
<span class="text" part="text"></span>
</span>
<span class="hover-bg" part="hover-bg" aria-hidden="true"></span>
<span class="hover-text text" part="hover-text text"></span>
<span class="border-width-checker" aria-hidden="true"></span>
</button>
`;
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
if (entry.borderBoxSize) {
const element = entry.target.getRootNode().host;
if (element.observedOnce) {
element.update('size');
}
element.observedOnce = true;
}
}
});
class GradientButton extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.appendChild(template.content.cloneNode(true));
this.shadow.adoptedStyleSheets = [sheet];
this.observedOnce = false;
}
get borderWidth() {
const defaultBorderWidth = 2;
const borderWidthChecker = this.shadowRoot.querySelector('.border-width-checker');
let borderWidth = parseFloat(getComputedStyle(borderWidthChecker).width);
return !isNaN(borderWidth) ? borderWidth : defaultBorderWidth;
}
update(attr, newValue) {
switch (attr) {
case 'type':{
const button = this.shadowRoot.querySelector('button');
button.type = newValue || 'button';
}break;
case 'text':{
// Placing the text in two elements allows a smoother transition on hover.
for (const span of [...this.shadowRoot.querySelectorAll('.text')]) {
span.innerHTML = newValue;
}
} // don't break, update size after text!
// 'size' isn't an attribute, but we'll call it manually
case 'size':{
// Get button size
const button = this.shadowRoot.querySelector('button');
const size = button.getBoundingClientRect();
this.width = size.width;
this.height = size.height;
// Apply border-radius
button.style.setProperty('--border-radius', `${this.height / 2}px`);
// Apply border mask
// ⚠ x, y, width, height, rx, ry are shifted by borderWidth because the stroke is drawn half-in, half-out
const border = this.shadowRoot.querySelector('.border');
const borderWidth = this.borderWidth;
const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${this.width} ${this.height}' version='1.1'%3E%3Crect x='${borderWidth / 2}' y='${borderWidth / 2}' width='${this.width - borderWidth}' height='${this.height - borderWidth}' rx='${(this.height - borderWidth) / 2}' ry='${(this.height - borderWidth) / 2}' fill='transparent' stroke-width='${borderWidth}' stroke='black'/%3E%3C/svg%3E`;
border.style.setProperty('--mask', `url("${svg}")`);
}break;}
}
connectedCallback() {
// Type should be set as "button" if no type is given
if (!this.getAttribute('type')) this.update('type', 'button');
// Re-calculate size when border-width changes
observer.observe(this.shadowRoot.querySelector('.border-width-checker'));
}
disconnectedCallback() {
observer.unobserve(this.shadowRoot.querySelector('.border-width-checker'));
}
static get observedAttributes() {
return ['type', 'text'];
}
attributeChangedCallback(attr, oldValue, newValue) {
if (oldValue === newValue) return;
this.update(attr, newValue);
}}
if (!customElements.get('gradient-button')) customElements.define('gradient-button', GradientButton);
</script>
</body>
</html>5. By Luc-Designs
Made by Luc-Designs. Random gradient generator button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn {
border-radius: 30px;
background-color: rgba(238,238,238,0.5);
color: black;
padding: 30px;
text-align: center;
border-color: transparent;
}
.btn:hover{
background-color: rgba(238,238,238,0.3);
cursor: pointer;
}
.container {
align-items: center;
justify-content: center;
display: flex;
height: 100vh;
width: 100%;
}
.output {
border-radius: 5px;
background-color: rgba(238,238,238,0.5);
color: black;
font-family: Montserrat;
padding: 7px;
text-align: center;
border-color: transparent;
}
#gen-btn {
font-size: 30px;
margin-right: 20px;
}
</style>
</head>
<body>
<body id="bg">
<div class="container">
<div>
<button onclick="generate()" class="btn " id="gen-btn">Generate a Gradient
</button>
</div>
<div>
<code id="output" class="ml-5 copy-text output"></code>
</div>
</div>
</body>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
function createHex() {
var hexCode1 = "";
var hexValues1 = "0123456789abcdef";
for (var i = 0; i < 6; i++) {if (window.CP.shouldStopExecution(0)) break;
hexCode1 += hexValues1.charAt(Math.floor(Math.random() * hexValues1.length));
}window.CP.exitedLoop(0);
return hexCode1;
}
function generate() {
var deg = Math.floor(Math.random() * 360);
var gradient = "linear-gradient(" + deg + "deg, " + "#" + createHex() + ", " + "#" + createHex() + ")";
document.getElementById("output").innerHTML = gradient;
document.getElementById("bg").style.background = gradient;
console.log(hexCode1, hexCode2);
}
document.onload = generate();
//# sourceURL=pen.js
</script>
</body>
</html>6. By Puskar Adhikari
Made by Puskar Adhikari. Simple animated buttons with gradient and ripple effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];500;600&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
background-color: #242b2e;
padding: 2em;
}
body > * {
flex-basis: 200px;
}
.btn {
position: relative;
display: inline-block;
padding: 12px 36px;
margin: 10px;
color: #fff;
font-size: 1.4rem;
letter-spacing: 2px;
border-radius: 5px;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
box-sizing: border-box;
}
.btn--ripple {
background: linear-gradient(90deg, #0162c8, #55e7fc);
overflow: hidden;
}
.btn--ripple span {
position: absolute;
background: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
animation: rippleAnimation 1s linear infinite;
}
@keyframes rippleAnimation {
0% {
width: 0px;
height: 0px;
opacity: 0.5;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
.btn--changeGradient {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
}
.btn--changeGradient:hover {
animation: changeGradientAnimation 8s linear infinite;
}
@keyframes changeGradientAnimation {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
.btn--liquidBtn {
overflow: hidden;
}
.btn--liquidBtn span {
position: relative;
z-index: 1;
}
.btn--liquidBtn:hover div {
top: -120px;
}
.btn--liquidBtn div {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
.btn--liquidBtn div::before, .btn--liquidBtn div::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -75%);
}
.btn--liquidBtn div::before {
border-radius: 45%;
background: #141414;
animation: liquidAnimation 10s linear infinite;
}
.btn--liquidBtn div::after {
border-radius: 40%;
background: rgba(20, 20, 20, 0.5);
animation: liquidAnimation 10s linear infinite;
}
@keyframes liquidAnimation {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
.btn--snakeBorder {
background: #383cc1;
overflow: hidden;
}
.btn--snakeBorder::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
}
.btn--snakeBorder span {
position: absolute;
}
.btn--snakeBorder span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0c002b, #1779ff);
animation: borderAnimation1 2s linear infinite;
}
@keyframes borderAnimation1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn--snakeBorder span:nth-child(2) {
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #0c002b, #1779ff);
animation: borderAnimation2 2s linear infinite;
animation-delay: 1s;
}
@keyframes borderAnimation2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.btn--snakeBorder span:nth-child(3) {
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, #0c002b, #1779ff);
animation: borderAnimation3 2s linear infinite;
}
@keyframes borderAnimation3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.btn--snakeBorder span:nth-child(4) {
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #0c002b, #1779ff);
animation: borderAnimation4 2s linear infinite;
animation-delay: 1s;
}
@keyframes borderAnimation4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
.btn--neon {
color: #03e9f4;
overflow: hidden;
transition: 0.5s;
filter: hue-rotate(290deg);
}
.btn--neon:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
}
.btn--neon::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
}
.btn--neon span {
position: absolute;
background: linear-gradient(180deg, transparent, #03e9f4);
}
.btn--neon span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 3px;
animation: borderAnimation1 1s linear infinite;
}
@keyframes borderAnimation1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn--neon span:nth-child(2) {
top: 0;
right: 0;
width: 3px;
height: 100%;
animation: borderAnimation2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes borderAnimation2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.btn--neon span:nth-child(3) {
bottom: 0;
left: 0;
width: 100%;
height: 3px;
animation: borderAnimation3 1s linear infinite;
}
@keyframes borderAnimation3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.btn--neon span:nth-child(4) {
top: 0;
left: 0;
width: 3px;
height: 100%;
animation: borderAnimation4 2s linear infinite;
animation-delay: 0.25s;
}
@keyframes borderAnimation4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
.btn--hoverEffect {
background: #0d0d0d;
z-index: 1;
}
.btn--hoverEffect::before, .btn--hoverEffect::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: transform 0.5s;
border-radius: 4px;
}
.btn--hoverEffect::before {
background: #03a9f4;
transform: scale(0);
transform-origin: bottom right;
}
.btn--hoverEffect::after {
background: transparent;
border: 2px solid #fff;
box-sizing: border-box;
transform-origin: top left;
transform: scale(1);
}
.btn--hoverEffect:hover::before {
transition: transform 0.5s;
transform-origin: top left;
transform: scale(1);
}
.btn--hoverEffect:hover::after {
transition: transform 0.5s;
transform-origin: top left;
transform: scale(0);
}
.btn--hoverEffect2 {
display: inline-block;
z-index: 1;
color: #ff3c83;
}
.btn--hoverEffect2:hover {
color: #fff;
}
.btn--hoverEffect2::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
transition: 0.5s all ease;
box-sizing: border-box;
}
.btn--hoverEffect2:hover::before {
border-radius: 4px;
transition: 0.5s all ease;
left: 0;
right: 0;
background: linear-gradient(90deg, #fd297a, #9424f0);
opacity: 1;
z-index: -1;
}
.btn--hoverEffect3 {
display: inline-block;
background: #fff;
color: #333;
overflow: hidden;
z-index: 1;
}
.btn--hoverEffect3::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 101%;
width: 101%;
clip-path: polygon(0 0, 100% 0, 10% 25%, 0 100%);
background: #444;
border-radius: 5px;
transition: 0.3s cubic-bezier(0.38, 1.15, 0.7, 1.12);
box-sizing: border-box;
z-index: -1;
}
.btn--hoverEffect3:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.btn--hoverEffect3:hover {
color: #fff;
}
</style>
</head>
<body>
<!-- Ripple effect -->
<button class="btn btn--ripple" id="ripple">Ripple</button>
<!-- change gradient -->
<button class="btn btn--changeGradient">Gradient</button>
<script>
//ripple btn
const rippleBtn = document.getElementById("ripple");
let ripples = document.createElement("span");
let cleartimeout;
//if want this effect when clicked then just add click insted of mouseover event
rippleBtn.addEventListener("mouseover", function (e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
ripples.style.left = x + "px";
ripples.style.top = y + "px";
this.appendChild(ripples);
cleartimeout = setTimeout(() => {
ripples.remove();
}, 1000);
});
rippleBtn.addEventListener("mouseout", function () {
ripples.remove(cleartimeout);
});
</script>
</body>
</html>