By Muhammad Arslan Aslam (https://arslanaslam.me)
A Pen by Muhammad Arslan Aslam on CodePen.
<a class="button" href="#">Click me!</a> | |
<button type="submit" class="button">Click me!</button> |
body { | |
background: black; | |
} | |
.button { | |
background-color: #004A7F; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
border: none; | |
color: #FFFFFF; | |
cursor: pointer; | |
display: inline-block; | |
font-family: Arial; | |
font-size: 20px; | |
padding: 5px 10px; | |
text-align: center; | |
text-decoration: none; | |
-webkit-animation: glowing 1500ms infinite; | |
-moz-animation: glowing 1500ms infinite; | |
-o-animation: glowing 1500ms infinite; | |
animation: glowing 1500ms infinite; | |
} | |
@-webkit-keyframes glowing { | |
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } | |
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; } | |
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } | |
} | |
@-moz-keyframes glowing { | |
0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } | |
50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; } | |
100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } | |
} | |
@-o-keyframes glowing { | |
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } | |
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } | |
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } | |
} | |
@keyframes glowing { | |
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } | |
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } | |
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } | |
} |