Animated html5 buttons on press

html animation button pressed
roxics picture roxics · Jul 1, 2011 · Viewed 8.7k times · Source

I'm wondering if there is a way I can animate a button when it is pressed (NOT rolled over) using HTML5/javascript?

I want to create an almost cartoonish button that expands a little when pressed and sparkles. I know that sounds kinda gawdy but I think the final result would look better than it sounds.

My inspiration is the ? blocks in the new Super Mario Brothers games.

Answer

Gaurav picture Gaurav · Jul 2, 2011

What you are looking for is created by CSS3, not HTML5.

Here's a blog post with links to ten different tutorials on making all sorts of cool buttons with CSS3: http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials.

Many of the buttons expand and stuff when rolled over by using the :hover selector. If you want a style to be applied when pressed, just substitute the :active selector instead.

Hope this gets you started.

Related questions

jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More
Slide down div on click Pure CSS?

I found this post How to create sliding DIV on click? But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well... What can …

Read More
How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More