<div class="spinner"></div>

@property --a {
  syntax: '<angle>'; 
  initial-value: 0deg;
  inherits: false
}
body { display: grid;}
.spinner {
  box-sizing: border-box; 
  place-self: center; 
  width: min(100%, 18em); 
  aspect-ratio: 1; 
  padding: 1.25em;
  border-radius: 50%; 
  box-shadow: 2px 2px 17px #000;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_14.jpg) 
      50%/ cover content-box, 
    conic-gradient(in hsl longer hue from var(--a), hsl(0, 100%, 80%) 0 0);
  animation: spin 2s linear infinite;
}
@keyframes spin { to { --a: 1turn } }

<button>Hover Me!</button>

@property --r {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false
}
button {
  place-self: center;
  border: solid 2px #0001;
  padding: 0 1em;
  display: block;
  margin: 200px auto;
  border-radius: 2em;
  box-shadow: inset 1px 3px 1px #fff4;
  background: radial-gradient(circle at var(--x, 0%) var(--y, 0%), black calc(var(--r) - 1px), darkorange var(--r)) border-box;
  color: white;
  font: 1.5em/ 2.25 ubuntu, sans-serif;
  transition: --r .35s;

  &:hover { --r: 100% }
}

function update_position(e) {
  let _t = e.target;
  if(_t.tagName.match(/^button$/i)) {
    let r = _t.getBoundingClientRect();
    ['x', 'y'].forEach(c => 
      _t.style.setProperty(`--${c}`, `${e[`client${c.toUpperCase()}`] - r[c]}px`))
  }
}
addEventListener('mouseover', update_position);
addEventListener('mouseout', update_position)

<h1><span>Подпишись на телеграмм канал @code_ready</span></h1>

h1 {
  position: relative;
  width: 18em;
  margin: 3em auto;
  padding: .7em 0;
  font: normal 800 1.4em / 1.5 sans-serif;
  text-align: center;
  text-transform: uppercase;
}
span {
  box-shadow: inset 0 0 0 5em white, 0 0 0 .2em white;
}
h1:before {
  content: '';
  position: absolute;
  top: 0;
  right: 11%;
  bottom: 0;
  left: 11%;
  z-index: -1;
  border: 3px solid coral;
}