Friday, 25 May 2012

Shake Button in CSS

Friday, May 25, 2012 Unknown 4 comments

This is quite an interesting use of CSS3. Most of the users tells that to shake a button or to put a vibration effect o a button or link can be done by only jquery/jscript. But CSS3 is providing a  broader environment for Dynamic and a very good GUI implementation to use it in your html file or website on image.


#CODE#

<html>
<head>
<title> css3 shake button</title>
<style type="text/css">
@keyframes shake{ 
0% { transform: translate(2px, 1px) rotate(0deg); } 
10% { transform: translate(-1px, -2px) rotate(-1deg); } 
20% { transform: translate(-3px, 0px) rotate(1deg); } 
30% { transform: translate(0px, 2px) rotate(0deg); } 
40% { transform: translate(1px, -1px) rotate(1deg); } 
50% { transform: translate(-1px, 2px) rotate(-1deg); } 
60% { transform: translate(-3px, 1px) rotate(0deg); } 
70% { transform: translate(2px, 1px) rotate(-1deg); } 
80% { transform: translate(-1px, -1px) rotate(1deg); } 
90% { transform: translate(2px, 2px) rotate(0deg); } 
100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 


@-moz-keyframes shake{ 
0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 


@-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
} 


.shake{ 
display:inline-block; 
} 


.shake:hover, 
.shake:focus{ 
animation-name: shake; 
animation-duration: 0.8s; 
transform-origin:50% 50%; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 


-moz-animation-name: shake; 
-moz-animation-duration: 0.8s; 
-moz-transform-origin:50% 50%; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 


-webkit-animation-name: shake; 
-webkit-animation-duration: 0.8s; 
-webkit-transform-origin:50% 50%; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
}
?</style>
</head>
<body><h2>
<a href="#"class="shake"><center> Hover me! </a></br></br>
<input type=button class="shake" value="Hope to see you all again soon"></h2>
</body>
</html>

Demo :




*Hit a comment if you like this.
Posted in:

4 comments:

xonie said...

Thanks , this is what i'm looking for now :D

27 Feb 2013, 09:31:00
Unknown said...

Welcome Dear. Keep visiting :)

27 Feb 2013, 13:57:00
web design company new jersey said...

Excellent css work.

26 Mar 2013, 14:53:00
Unknown said...

Thnxx..

26 Mar 2013, 21:46:00

Post a Comment

This provides free backlink for you so feel free to comment and get a free backlink.