Firefox Marketplace Animated Buttons

By  on  

The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so are you). One of the well written and elegant touches to the site is its animated button. They are comprised completely of CSS and achieve a great effect by animating box-shadow and line-height.

The HTML

These styles can be applied to A elements with the button class or actual BUTTON elements:

<a href="#" class="button" role="button">Arsenal Arsenal Arsenal</a>

Since BUTTON elements have had styling quirks in the past, you'll want to use A elements everywhere outside of forms.

The CSS

There's a lot of CSS in the basic element state, but I kept all of it to keep my demo true to the Marketplace button. Here's the magic:

a.button:link,
a.button:visited,
button,
input[type=submit],
input[type=button] {
	border: 0;
	color: white;
	display: inline-block;
	font: 600 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif;
	height: 32px;
	background-color: 
	#267CC2;
	padding: 0 24px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
	white-space: nowrap;
	border-radius: .5em;
	box-shadow: 0 2px 1px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 0 rgba(255, 255, 255, .2);
	background-color: #267CC2;
	background-image: linear-gradient(#42A5E1, #267CC2);
	transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;
	transition-duration: .2s,.2s,.2s,.2s;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:focus,
input[type=button]:focus {
    box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2), 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
	line-height: 28px;
	text-decoration: none;
}

a.button:active, button.button:active {
    box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, .2), inset 0 12px 24px 6px rgba(0, 0, 0, .2), inset 0 0 2px 2px rgba(0, 0, 0, .2);
	transition-duration: .1s,.1s,.1s,.1s;
	line-height: 34px;
}

As you can probably guess, the original CSS was generated using a preprocessor (LESS, in this case). As with any piece of expertly written code, there isn't too much to explain. The animated transition is applied to box-shadow and line-height properties and the :active and :hover states trigger the animations.

I love what the AMO and Marketplace team has done with this subtle effect. Not only is the effect smooth and unique, it requires no JavaScript and uses what have now become standard effect techniques. Love it!

Recent Features

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!