<button> Tag Examples

Examples of the button tag in HTML 5
Blinking Buttons
(see Blinking Button Demo above)
<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
(see Animated Button Demo above)
<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>