5+ JavaScript Gradient Button Examples

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>