logo A Technique for Animated Buttons

View Origional Page

Click the Button to view a copy of the authors page.

Link to another Button example with the image resized.

Link to a Horzontal Menu using this Button technique.

HTML for Animated Button

<a href="#" class="round"><span>Button Link 1</span></a>

Because the Button is an anchor it can be placed any where you would put an anchor. In a unordered list for example.

CSS for Animated Button

.round {

cursor:pointer; cursor:hand; line-height:27px; background:url(images/button.gif) no-repeat right top; padding-right:20px; vertical-align:middle; display:block; /*opera*/ display:inline-block; /*ie*/ display:-moz-inline-box; /*ff*/ }

.round span {

color:#888; background:url(images/button.gif) no-repeat left top; height:27px; display:block; display:inline-block; padding-left:20px; line-height:27px; }

a.round:hover {

background-position:right -155px;}

a.round:hover span {

background-position:left -155px; color:#000; text-decoration:none;}

Image for Animated Button

Image 255 x 182 total. Button is 27px high.