[jsfiddle url=”http://jsfiddle.net/sfaisal/f7or8qpu/4″ height=”300px” include=”result,html,js,css” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]
Jsfiddle link
http://jsfiddle.net/sfaisal/f7or8qpu/4
With this one line of CSS3, everything that has hover selector or you change the class of the element using jQuery, there will be a transition between these two different styles.
Simply, add this line anywhere in the website css file.
[css]
*{transition: all 0.3s ease 0.0s;}
[/css]
Example 1: Button with hover selector
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LkrkXm” default_tab=”css,result” user=”sfaisal”]See the Pen <a href=’http://codepen.io/sfaisal/pen/LkrkXm/’>Button CSS3 Transition</a> by FAISAL ALSABEA (<a href=’http://codepen.io/sfaisal’>@sfaisal</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Example 2: Using jQuery add new style to the button
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”YWdWod” default_tab=”js,result” user=”sfaisal”]See the Pen <a href=’http://codepen.io/sfaisal/pen/YWdWod/’>Button CSS3 Transition & jQuery</a> by FAISAL ALSABEA (<a href=’http://codepen.io/sfaisal’>@sfaisal</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
A better explanation for CSS3 Transition on W3Schools, CSS-Tricks and MDN.
This is a simple smooth css animation, I did it on codepen
See the Pen Simple submit button for Ajax with smooth loading animation by FAISAL ALSABEA (@sfaisal) on CodePen.