<button class="btn-donate">
  Donate now
</button>
<form class="control">
  <legend class="control__legend">Controls</legend>
  <label class="control__label" for="radii">Radii</label>
  <input
    type="range"
    min="1"
    max="50"
    value="22"
    class="control__slider"
    name="radii"
  >
  <p class="control__size">22 px</p>
  <label class="control__label" for="radii">Size</label>
  <input
    type="range"
    min="1"
    max="4"
    value="3"
    class="control__slider"
    name="size"
    step="0.5"
    >
  <p class="control__size">3 rem</p>
  <label class="control__label" for="color1">Color 1</label>
  <input
    type="color"
    class="control__color"
    name="color1"
    value="#60D9FF"
    >
  <p class="control__size"></p>
  <label class="control__label" for="color2">Color 2</label>
  <input
    type="color"
    class="control__color"
    name="color2"
    value="#1D74FF"
    >
  <p class="control__size"></p>
</form>
@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@400;500;700&display=swap');

// Cold variables
$f-main: 'Recursive', sans-serif;
$box-shadow:
  0px 0px 20px rgba(71, 184, 255, 0.5),
  0px 5px 5px -1px rgba(58, 125, 233, 0.25),
  inset 4px 4px 8px rgba(175, 230, 255, 0.5),
  inset -4px -4px 8px rgba(19, 95, 216, 0.35);

:root {
  font-family: #{$f-main};
  --clr-font-main: hsla(0 0% 20% / 100);
}

body {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
}

.btn-donate {
  --btn-bg-1: hsla(194 100% 69% / 1);
  --btn-bg-2: hsla(217 100% 56% / 1);
  --btn-bg-color: hsla(360 100% 100% / 1);
  --radii: 22px;
  cursor: pointer;
  padding: 0.9em 1.4em;
  min-width: 120px;
  min-height: 44px;
  font: {
    size: var(--size, 3rem);
    family: $f-main;
    weight: 500;
  };
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(
    325deg,
    var(--btn-bg-2) 0%,
    var(--btn-bg-1) 55%,
    var(--btn-bg-2) 90%);
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow: $box-shadow;
  &:hover { background-position: right top; }
  &:is(:focus, :focus-within,:active) {
    outline: none;
    box-shadow:
      0 0 0 3px var(--btn-bg-color),
      0 0 0 6px var(--btn-bg-2);
  }
  
  @media (prefers-reduced-motion: reduce) {
    transition: linear;
  }
}

.control {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-auto-rows: 3ch;
  place-items: center;
  gap: 1ch 2ch;
  color: var(--clr-font-main);
  &__legend {
    grid-column: -1 / 1;
    font-size: 1.5rem;
    font-weight: bold;
  }
  &__color {
    width: 80%;
    border: none;
  }
}
View Compiled
const [ radiiSlider, sizeSlider ] = document.querySelectorAll('.control input[type=range]');
const [ colorPicker1, colorPicker2 ] = document.querySelectorAll('.control input[type=color]');
const [ radii, size ] = document.querySelectorAll('.control p');
const button = document.querySelector('button');

const updateControls = (control, unit = 'px') => {
  const name = control.previousElementSibling.innerText.toLowerCase();
  const currentValue = control.nextElementSibling;

  button.style.setProperty(`--${name}`, control.value + `${unit}`);
  currentValue.innerText = control.value + ` ${unit}`;
}

const updateColor = control => {
  const number = control.previousElementSibling.innerText.split('').pop();
  const currentValue = control.nextElementSibling;
  
  button.style.setProperty(`--btn-bg-${number}`, control.value);
  currentValue.innerText = control.value;
}

radiiSlider.addEventListener('change', ({ target }) => updateControls(target))
sizeSlider.addEventListener('change', ({ target }) => updateControls(target, 'rem'))
colorPicker1.addEventListener('change', ({ target }) => updateColor(target))
colorPicker2.addEventListener('change', ({ target }) => updateColor(target))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.