<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.