<button> Tag Examples
Examples of the button
tag in HTML 5
Blinking Buttons
<p>
<style scoped="scoped">
div#button-tag-demo * {
margin: 0;
padding: 0;
}
@-webkit-keyframes on-blinking-blue {
from {
background-color: #0000ff;
}
to {
background-color: #000033;
}
}
@-webkit-keyframes off-blinking-blue {
from {
background-color: #000033;
}
to {
background-color: #0000ff;
}
}
@-webkit-keyframes on-blinking-red {
from {
background-color: #ff0000;
}
to {
background-color: #330000;
}
}
@-webkit-keyframes off-blinking-red {
from {
background-color: #330000;
}
to {
background-color: #ff0000;
}
}
button.blinking-blue-and-red {
width: 50px;
height: 20px;
border: 3px outset #999999;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 0.6s;
}
button#blue-left {
background-color: #0000ff;
-webkit-animation-name: on-blinking-blue;
-webkit-animation-timing-function: ease-in;
}
button#blue-right {
background-color: #000066;
-webkit-animation-name: off-blinking-blue;
-webkit-animation-timing-function: ease-out;
}
button#blank-space {
display: hidden;
width: 50px;
height: 20px;
border: 3px solid #ffffff;
}
button#red-left {
background-color: #ff0000;
-webkit-animation-name: on-blinking-red;
-webkit-animation-timing-function: ease-in;
}
button#red-right {
background-color: #aa1111;
-webkit-animation-name: off-blinking-red;
-webkit-animation-timing-function: ease-out;
}
button#light-bar {
width: 275px;
height: 10px;
border: 2px outset #999999;
background-color: #aaaaaa;
opacity: 0.7;
}
</style>
<button id="blue-left" class="blinking-blue-and-red"></button>
<button id="blue-right" class="blinking-blue-and-red"></button>
<button id="blank-space"></button>
<button id="red-left" class="blinking-blue-and-red"></button>
<button id="red-right" class="blinking-blue-and-red"></button><br/>
<button id="light-bar"></button>
</p>
Animated Buttons
<p>
<style scoped="scoped">
button.button-bar {
border: 2px solid #000000;
border-radius: 10px;
padding: 4px;
-webkit-transition:
-webkit-transform 0.3s ease-in-out
}
button.button-bar:hover { -webkit-transform: scale(1.5); }
</style>
<button class="button-bar">Button A</button>
<button class="button-bar">Button B</button>
<button class="button-bar">Button C</button>
</p>