How to create a cool pure CSS Flipping button Animation? | Code Snippet #27

19 Mar , 2014  Code Snippets 

Code Snippet #27: The code shows us how to create a cool and pure CSS flipping button animation. We use CSS3 styling methodologies to create this flipping button animation.

Pure CSS Button Flipping Animation

CSS3 is becoming as powerful tool for the web as jQuery. CSS3 animations are gaining more and more popular among web designers and developers. In today’s code snippet, we will be using CSS3 animations to create a cool effect of flipping the button.

This animation can be used for your mobile UI, where it is going to make it look cool. Note that, older browsers like IE6-8 do not support any of the CSS3 animations. Please view this web on a modern browser like Chrome or Firefox.

DEMO: (View it in Chrome/Firefox – Click on the button to see the CSS3 flipping button animation)

HTML Markup:

CSS3:

Explanation:

In our HTML, we create the whole button as a link with the class name “flipper-container”. Then, we add a target div for the flipping animation, this div is given a class name “flipper”.  There are two faces for the button, a front face and a back face.

In the CSS3, the flipper container is given a CSS3 perspective. Then the actual target flipper is added with a webkit transition and cubic-bezier function. Finally, a rotate transform is added on the target flipper.

Hope you liked this quick code snippet we found today. Please let us know if anything you would like to suggest.



, ,

Comments are closed.