<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cs-wrapper">
<div class="cs-buttons-table">
<ul class="cs-buttons-list">
<li><a class="cs-button is-flashing--normal" href="#"><span>Flashing--Normal</span></a></li>
<li><a class="cs-button is-flashing--colored" href="#"><span>Flashing--Colored</span></a></li>
</ul>
</div>
</div>
.cs-wrapper {
width: 100vw;
height: 100vh;
background-color: white;
}
.cs-buttons-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.cs-buttons-list > li + li {
margin-top: 20px;
}
.cs-button {
overflow: hidden;
position: relative;
display: inline-block;
padding: 6px 10px;
border-radius: 4px;
background-color: orange;
background-image: -webkit-linear-gradient(top, #ffc04d, orange);
background-image: linear-gradient(to bottom, #ffc04d, orange);
font-family: monospace;
font-size: 28px;
text-decoration: none;
color: white;
-webkit-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
}
.cs-button:hover {
opacity: 0.75;
}
.cs-button:before {
content: '';
position: absolute;
display: block;
top: -10px;
left: -50%;
bottom: -10px;
width: 20px;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.cs-button.is-flashing--normal:before, .cs-button.is-flashing--colored:before {
-webkit-animation: flashing 4000ms ease 2000ms infinite;
animation: flashing 4000ms ease 2000ms infinite;
}
@-webkit-keyframes flashing {
0% {
opacity: 1;
left: -50%;
}
50% {
opacity: 1;
left: 150%;
}
51% {
opacity: 0;
left: 150%;
}
99% {
opacity: 0;
left: -50%;
}
100% {
opacity: 0;
left: -50%;
}
}
@keyframes flashing {
0% {
opacity: 1;
left: -50%;
}
50% {
opacity: 1;
left: 150%;
}
51% {
opacity: 0;
left: 150%;
}
99% {
opacity: 0;
left: -50%;
}
100% {
opacity: 0;
left: -50%;
}
}
.cs-button.is-flashing--normal:before {
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}
.cs-button.is-flashing--colored:before {
background-image: -webkit-linear-gradient(left, rgba(255, 255, 0, 0), yellow);
background-image: linear-gradient(to right, rgba(255, 255, 0, 0), yellow);
}
.cs-button > span {
position: relative;
text-shadow: 0 0 2px darkorange;
}
