CSS3 Buttons Demonstrating alternate vs normal animation-direction

by csscreations

CSS3 Buttons demonstrating alternate vs normal animation-direction made by Adrian Mato. CSS3 Animations are not supported by the current versions of Opera yet. IE9 and below also do not support them.

HTML

<div class="container">
	<p>
        <a id="button" class="button" href="#">Button using direction — alternate</a>
	</p>
	
	<p>
		<a id="button" class="button normal" href="#">Button using direction — normal</a>
	</p>
</div>

CSS

 body {
   font: 16px 'Helvetica Neue';
   color: #555;
   background: #eee;
   padding: 1em;
 }
 h1 {
   font: 2.5em bold 'Georgia', serif;
   color: #222;
   text-shadow: 0px 1px #fff;
   margin-bottom: 1em;
 }
 p { margin-bottom: 5em; }
 
 .container {
  width: 640px;
  margin: 2em auto;
  text-align: center;
 }
 
 /* button */
 
 .button {
   padding: .8em 1em;
   color: #fdfdfd;
   text-decoration: none;
   display: inline-block;
   border:  1px solid #b3005c;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   text-shadow: 0 1px 0 #800042;
   background: #ffbcdc;
   background: -moz-linear-gradient(top, #ffbcdc 0%, #ff4ca8 2%, #ff0084 2%, #ff0084 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbcdc), color-stop(2%,#ff4ca8), color-stop(2%,#ff0084), color-stop(100%,#ff0084));
   background: -webkit-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);
   background: -o-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);
   background: -ms-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbcdc', endColorstr='#ff0084',GradientType=0 );
   background: linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);
 }
 
 .button:before {
   content: "\2665  ";
 }
 
 /* animations */
 
 @-webkit-keyframes resize {
     100% {
         -webkit-box-shadow: 0 0 50px #ff0084;
         color: #fff;
     }
 }
 @-moz-keyframes resize {
     100% {
         -moz-box-shadow: 0 0 50px #ff0084;
         color: #fff;
     }
 }

 @-ms-keyframes resize {
     100% {
         box-shadow: 0 0 50px #ff0084;
         color: #fff;
     }
 }
 @keyframes resize {
     100% {
         box-shadow: 0 0 50px #ff0084;
         color: #fff;
     }
 }
     
 .button:hover {
     -webkit-animation: resize .5s ease-in-out infinite alternate;
     -moz-animation: resize .5s ease-in-out infinite alternate;
     -ms-animation: resize .5s ease-in-out infinite alternate;
     animation: resize .5s ease-in-out infinite alternate;
 }
 
 .button.normal:hover {
   -webkit-animation-direction: normal;
   -moz-animation-direction: normal;
   -ms-animation-direction: normal;
   animation-direction: normal;
 }

CSS3 Buttons Demonstrating alternate vs normal animation-direction

HTML

CSS

More Items

CSS3 Range Slider...

Incredible ShareButton

Different CSS3 Box...

Blurry text

CSS3 Text Gradient

Awesome Image Captions...

Paper Pile Effect v2

iOS Inspired CSS3 Popups

Add New Comment

Showing Comments

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

CSS3 Buttons Demonstrating alternate vs normal animation-direction

HTML

CSS

More Items

CSS3 Range Slider...

Incredible ShareButton

Different CSS3 Box...

Blurry text

CSS3 Text Gradient

Awesome Image Captions...

Paper Pile Effect v2

iOS Inspired CSS3 Popups

Add New Comment

Showing Comments

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Share a Feedback