<a class="button" href="#">Click here!</a>
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2f2f2f;
}
.button {
background-color: #1c87c9;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 10px 10px;
text-align: center;
text-decoration: none;
}
@keyframes glowing {
0% {
background-color: #2ba805;
box-shadow: 0 0 5px #2ba805;
}
50% {
background-color: #49e819;
box-shadow: 0 0 20px #49e819;
}
100% {
background-color: #2ba805;
box-shadow: 0 0 5px #2ba805;
}
}
.button {
animation: glowing 1300ms infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.