Introducing better, responsive buttons using CSS3

Today, we rolled out a redesigned set of buttons across our products. Since we launched in 2006, we’ve mostly used images for the various buttons on our site. This is how our image-based buttons used to look.

We’ve been eyeing these buttons with disdain for some time now because they’re completely static–they don’t respond when users point or click — and that’s disappointing. It takes away from the feeling we want users to experience when they’re using our products.

We wanted our new buttons to feel more responsive. We identified four different states a button could have — default, hover, pressed and disabled. We also designed three different types of buttons — a default button, a “primary” button to highlight the most crucial action on a page and a new treatment for the orange buttons we use on all of our search and booking screens.

Our new buttons are styled entirely with CSS3, so different browsers render them differently. Most modern browsers render them quite consistently. Internet Explorer, obviously, fails to behave itself. After jumping through hoops to accommodate Internet Explorer, the styling on them is still nowhere close to what we intended. Take a look at how your browser renders these buttons. Go ahead, play with them to see how they respond:

Check savings	Register now	Search flights
The basic button	The primary button	The transactional button

We love our new buttons, they’re a big improvement over the earlier ones. Some of the advantages of CSS3-based buttons are:

They don’t use images — For the longest time, designers have used images to customize the look and feel of button elements. But every image used on a site needs an extra HTTP request to load the image. Extra HTTP requests slow down web pages and increase bandwidth costs. Our new buttons require no images at all, helping our web pages load faster.

They respond to interactions — Our new buttons provide instant user feedback when you move your mouse over them or click on them. Skeuomorphic elements, like shadows, bevels and gradients, help it mimic a physical button’s behaviour, making it more of a pleasure to use.

They degrade gracefully — We’ve made sure these buttons are usable in browsers that don’t support CSS3 (Internet Explorer, we’re looking at you). They don’t work as well in those browsers but they’re still an improvement over the image-based static buttons.

They scale amazingly well — We don’t need to maintain a respository of buttons in varying sizes. Simply adjusting the font-size takes care of all the styling. See it in play here:

Check savings	Check savings	Check savings
Font size: 11px	Font size: 14px	Font size: 18px

They’re easier to maintain — If we ever need to change the look and feel of our buttons, we just have to edit the stylesheet and we’re done. Beats the hell out of recreating every button image and replacing them across the site.

They’re easy to use — Including buttons on our pages is really simple for our designers and programmers. Add a “button” tag to get the default button. Put whatever text you want to display within the tag. Give it the appropriate class name to get one of the styling options. Adjust the font-size as required and voila, you have a beautiful and functioning button.