<a class="glowButton" href="#">Glow Button</a>
@import url(https://fonts.googleapis.com/css?family=Roboto:900);

$spotOne: #26115a;
$spotTwo: #ec008c;
$spotThree: #ff0000;

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, 
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  font-family: 'Roboto', sans-serif;
  background-color: $spotOne;
}

.glowButton {
  position: relative;
  margin: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 3rem;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient( 160deg, $spotThree, $spotTwo );
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  box-shadow: 
    0 0 0 0 $spotTwo,
    0.5rem 0.5rem 30px mix(black, $spotOne, 50%);
  transition: box-shadow 0.6s;
  
  &:hover {
    box-shadow: 
      0 0 60px 2px $spotTwo,
      0.5rem 0.5rem 30px mix(black, $spotOne, 50%);
  }
  
  &:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: 30px;
    background-image: linear-gradient( 170deg, rgba(white, 0.3), rgba(white, 0) );
    pointer-events: none;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.