Outer glow button CSS animation

This is a button element with outer glow CSS effect.

Preview

Html

Click to edit (doesn't update preview)

<a href="#" class="button">Hover me</a>

/

Click to edit (doesn't update preview)

.button {
  border: 1px solid #38bdf8;
  border-radius: 0.3em;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.85em 1.65em;
  background-color: #000;
  text-decoration: none;
  box-shadow: 0px 2px 24px 2px rgba(3,140,220,.1);
  transition: box-shadow 0.3s;
  color: #fff;
}

.button:hover {
  box-shadow: 0px 2px 24px 2px rgba(3,140,220,.6);
}

.button {
  border: 1px solid #38bdf8;
  border-radius: 0.3em;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.85em 1.65em;
  background-color: #000;
  text-decoration: none;
  box-shadow: 0px 2px 24px 2px rgba(3,140,220,.1);
  transition: box-shadow 0.3s;
  color: #fff;
  
  &:hover {
    box-shadow: 0px 2px 24px 2px rgba(3,140,220,.6);
  }
}