Gradient border 2

by jwerre

HTML

<button>
  Click Here
</button>

CSS

/**
 * `@property` is required for the animation to work.
 * Without it, the angle values won’t interpolate properly.
 *
 * @see https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
 */
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

/**
 * To animate the gradient, we set the custom property to 1 full
 * rotation. The animation starts at the default value of `0deg`.
 */
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}


button {

  cursor: pointer;

  border-radius: 1rem;
  /* box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25); */
  color: black;
  padding: 1rem 2rem;
  /* width: min(400px, 90vw); */
  /* add the animation, but pause it by default */
  animation: spin 2.5s infinite linear paused;

  /**
   * Using `background-origin` we can create a “border” using two gradients. And to
   * make the gradients better-looking, we use OKLCH.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
   * @see https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
   */
  background:
    /* Background colors don’t work with `background-origin`, so use a gradient. */
    linear-gradient(to bottom, white, white) padding-box,
    /* ends at inner border edges */
    conic-gradient(from var(--bg-angle) in oklch longer hue,
      oklch(0.85 0.37 0) 0 0) border-box;
  /* extends to outer border edges */

  /* a clear border lets the background gradient shine through */
  border: 2px solid transparent;

  /* unpause the animation on hover */
  &:hover {
    animation-play-state: running;
  }
}