Skip to main content

Devolved web design blog

Animated CSS buttons

Animated css buttons

Getting round to finalising the Devolved website now and adding some finishing touches so thought I’d have a play with css animation.

To keep inline with our build philosophy the improvements to the buttons are available to modern browsers with a graceful fall back for others. Border-radius support in IE is an obvious problem, gradient using -moz- (Firefox) and -webkit-  (Chrome/Safari) and animation limited to  -webkit-.

Once you’ve styled your basic button, you declare how your animation works then execute it via a few decelerations.

Basic styles for all browsers

  1. input[type=submit] {
  2. background-color: #980B3E;
  3. color: #fff;
  4. font-weight: bold;
  5. font-size: 1em;
  6. width: auto;
  7. padding: 4px;
  8. }

Example

Example button

This makes a simple red background button with square edges. Use of the input[type=submit] selector hides it from IE6 and saves headaches later on.

Now we add the next layer of styling; rounded corners, gradients and shadows. None of these are supported by IE and whilst we’re using prorietary features we’ll include the correct css3 property where possible to make the mark up as future proof as possible.

Proprietary styles for -moz- and -webkit-

  1. input[type=submit] {
  2. background-color: #980B3E;
  3. color: #fff;
  4. font-weight: bold;
  5. font-size: 1em;
  6. width: auto;
  7. padding: 4px;
  8. text-shadow: 1px 1px 1px #70062C;
  9. -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
  10. -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; box-shadow: 0 1px 3px #999;
  11. background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#BF1552), to(#980B3E));
  12. background-image: -moz-linear-gradient(270deg, #BF1552, #980B3E);
  13. }

Example

Example button

Declaring a simple animation is pretty basic but you can add more values to form more complex changes.

  1. @-webkit-keyframes swankybutton {
  2. from { padding: 4px; }
  3. 50% { padding: 5px; }
  4. to { padding: 6px; }
  5. }

Once you’ve given your animation a name and defined what it does, you can assign it to your element through the css and choose how it will be executed, in this case looped on :hover.

  1. input[type=submit]:hover {
  2. -webkit-animation-name: swankybutton;
  3. -webkit-animation-duration: 1s;
  4. -webkit-animation-iteration-count: infinite;
  5. cursor: pointer;
  6. }

Final product

Example button

Of course we’re going to have to wait a while before this becomes standard … and then a while for IE to catch up but there’s no reason we can’t be adding a few extra touches here n there in the meantime.

3 Comments »

3 Comments on “Animated CSS buttons”

Dan Jordan 3:19 pm on March 22nd, 2010

Nice post!
I’ve not looked into -webkit-animation-name and -webkit-animation-iteration yet. Looks interesting.

  • Damon Stephenson 5:56 pm on March 22nd, 2010

    Unique animation for a button. Usually see a fade to another colour or a gentle colour-pulsate.
    Only problem I have with them is that I like to see my buttons have a click state. It could perhaps stop moving and go darker?
    I’d also recommend a smoother growing/shrinking movement. I find it quite jarring…

    Remember to add the CSS3 attributes without vendor prefix. Opera and IE9 support some of these ( border-radius comes to mind :) )

  • deev 6:54 pm on March 22nd, 2010

    @Dan Yeah it’s nice to see things opening up, at this rate I won’t need to feel bad about not learning enough JavaScript ;)

    @Damon The tutorial I cribbed from did the glowing thing (v nicely too tbh) but as I was just playing I thought I’d try something with knock on effects for layout, to stop the page expanding you need to set a bigger line-height.

    Good to make myself aware of these things on the inconsequential stuff before working it into my MO.

    Great thing about it being CSS of course is that I can keep playing with it without replacing lines n lines of markup. #win