- var n = 0;
.base
  while n < 300
    - n++
    i
  .bg Hover me

*, *::before, *::after {
  box-sizing: inherit;
}
:root, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #eee;
}
body {
  display: grid;
  place-items: center;
  place-content: center;
}
.base {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 210px;
  height: 70px;
  border-radius: 3px;
  color: #fff;
  background: #027ad6;
  font: 700 24px sans-serif;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.07), 
    0 2px 4px rgba(0,0,0,0.07), 
    0 4px 8px rgba(0,0,0,0.07), 
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07), 
    0 32px 64px rgba(0,0,0,0.07);
}

i {
  width: calc(210px / 30);
  height: calc(70px / 10);
}

@for $i from 1 through 10 {
  i:nth-child(n + #{ 30 * ($i - 1) + 1 }):nth-child(-n + #{ 30 * $i }):hover ~ .bg {
    --y: #{ 10 * $i }%;
  }
}

@for $i from 1 through 30 {
  i:nth-child(30n+#{ $i }):hover ~ .bg  {
    --x: #{ 100 / 30 * $i }%;
  }
}

.bg {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  grid-column: 1 / span 30;
  grid-row: 1 / span 10;
  transition: opacity .3s;
  pointer-events: none;
  text-shadow: 0px 2px 5px rgba(0,0,0,.1);
}

i:hover ~ .bg {
  background: radial-gradient(circle 110px at var(--x) var(--y), rgba(169, 242, 136, .4), rgba(169, 242, 136, 0));
}