JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="button">button ya</div>

<div class="button-new">button new</div>

CSS

.button {
  --_m-button-shadow-inverted-rgb: 35, 220, 45;
  --context-shadow-cta: 0px 20px 20px rgba(var(--_m-button-shadow-rgb, 35, 220, 45), var(--_m-button-shadow-opacity, 1));
  
  width: 10rem;
  height: 10rem;
  background-color: black;
  box-shadow: var(--context-shadow-cta);
  color: white;
}

.button:hover {
  --_m-button-shadow-opacity: 1;
  --_m-button-shadow-rgb: var(--_m-button-shadow-inverted-rgb);
}

.button-new {
  width: 20rem;
  height: 20rem;
  background-color: var(--_m-button-shadow-rgb);
  box-shadow: var(--context-shadow-cta);
}