Skip to content

Instantly share code, notes, and snippets.

@Dilden

Dilden/flashing-police-light-button-thing.markdown

Created September 15, 2016 22:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Dilden/fbee9b21a25089f4bc6f46a40fc588c0 to your computer and use it in GitHub Desktop.
Save Dilden/fbee9b21a25089f4bc6f46a40fc588c0 to your computer and use it in GitHub Desktop.
Download ZIP
Flashing Police Light Button thing
Raw
index.html
<body>
<a class="promo_button" href="#" alt="Donate Now"><span>POLICE!</span><br> Get on the ground!</a>
</body>
Raw
style.css
body {
text-align: center;
padding-top: 70px;
}
.promo_button {
font-size: 42px;
font-weight: 600;
text-decoration: none;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
background-color: #E25E5E;
color: #efefef;
padding: 30px 50px;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 500px;
text-transform: uppercase;
display: inline-block;
-webkit-animation: police .35s infinite;
-webkit-animation-direction: alternate;
animation: police .35s infinite;
animation-direction: alternate;
}
.promo_button span {
font-size: 20px;
text-transform: none;
border-bottom: 3px #efefef solid;
font-style: italic;
padding-bottom: 3px;
}
@-webkit-keyframes police {
from {background-color: #E25E5E;}
to {background-color: #7C91B0;}
}
@keyframes police {
0% {background-color: #E25E5E;}
100% {background-color: #7C91B0;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment