Fun with Flashing Buttons
HTML
<br>
<p> Click button to start/stop processing ...</p>
<a id="btn1" class="button" href="#">Inactive</a>
CSS
body {
background: white;
}
.button {
background-color: #EEEEEE;
/*-webkit-border-radius: 10px;*/
border-radius: 3px;
border: 4px;
color: #4F4F4F;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
}
@-webkit-keyframes glowing {
0% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
50% { background-color: #00FF00; box-shadow: 0 0 40px #00FF00; }
100% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
}
@-moz-keyframes glowing {
0% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
50% { background-color: #00FF00; box-shadow: 0 0 40px #00FF00; }
100% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
}
@-o-keyframes glowing {
0% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
50% { background-color: #00FF00; box-shadow: 0 0 40px #00FF00; }
100% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
}
@keyframes glowing {
0% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
50% { background-color: #00FF00; box-shadow: 0 0 40px #00FF00; }
100% { background-color: #EEEEEE; box-shadow: 0 0 3px #00B200; }
}
JAVASCRIPT
document.getElementById("btn1").addEventListener("click", toggleActivation);
function toggleActivation() {
var btn = document.getElementById("btn1");
btn.isActivated = !btn.isActivated; // toggle
if(btn.isActivated){
btn.innerHTML = "Activated!";
// btn.style[-webkit-animation] = "glowing 1500ms infinite";
// btn.style[-moz-animation] = "glowing 1500ms infinite";
// btn.style[-o-animation] = "glowing 1500ms infinite";
btn.style.animation = "glowing 1800ms infinite";
} else {
btn.innerHTML = "Inactive";
// btn.style[-webkit-animation] = "none";
// btn.style[-moz-animation] = "none";
// btn.style[-o-animation] = "none";
btn.style.animation ="none";
}
}
