Buttons are one of the core UI elements in any interface. Making them feel responsive and aesthetically pleasing will go a long way to making your app more fun to use.
First up, a sneak peak of the final result:
CSS vs. Images
CSS has come a long way, and now with support for border radius, shadows, and gradients you can create some pretty awesome looking buttons without using a single image. Unfortunately the rendering quality is not nearly as good as that of Photoshop. Edges are pixelated when using border radius, and you do not have nearly the fine graphical control that you can get out of Photoshop. For example, while box shadow supports x/y offsets and a blur radius, it does not support a contour property.
Performance is also not that great. On mobile devices using a ton of gradients and shadows will noticeably reduce the snappiness of the app. You may argue that eliminating the images will reduce http requests, but through image sprites you can combine the button graphics into your main app image sprites and not have any additional http requests.
Designing the Aesthetic
Great usability requires a clear visual hierarchy. To that extent we have two buttons: a white one and a blue one. The blue one stands out more and is intended to be used as the primary action such as Save Changes and Continue. The white one blends into the background and should be used for secondary actions such as Cancel and Back.
A button is made up of four states, though two of them can be combined into one.
The key to making a good button is subtlety. If your users can readily identify the techniques and filters you used to achieve the effect you aren’t subtle enough. To achieve a graphical complexity where the effects blend together and become inseparable we will layer them on top of each other.
Base Button This layer provides the base look of the button. For this example we picked a light source sitting above and to the top of the button. Thus the gradient will start lighter at the top and end darker towards the bottom.
We apply a drop shadow below it to make it pop off the page a little bit and a few other effects to add a bit of visual complexity.
Bottom Border The base gradient makes having a solid color border problematic. Using a solid color the border will either be too dark at the top or too light at the bottom. So we use a gradient mask to blend a darker border onto the button which lifts the bottom of the button even further off the page
Glossy Highlight We apply a glossy shine to the button at the top since that is where the light is sitting. The gloss has to be very subtle. If it is too obvious it can greatly detract from the aesthetic and look too slick.
Label The label has a drop shadow from below to give the impression that the text is etched into the button.
To truly reflect how buttons behave in the real work we need to tweak the aesthetic slightly for each state. For the hovering state the white button gets darker while the blue one gets lighter.
For the active state things get a little bit more involved. We do several things:
- Since the button is recessed and getting less light we remove the gloss and replace it with a inner shadow and darken the base gradient slightly.
- We change the drop shadow of the button to be a 1 pixel pure white shadow. The white shadow emulates light catching off the edge of the button as it is pressed down below the surface of the page.
- To emulate the button going down the label is shifted down by 1 pixel.
You can optionally add an icon to the white button to draw more attention to it, add visual interest, and move it up in the page hierarchy. The most complete and visually stunning icon set out there is the Fugue icon set.
If you do add an icon remember that the icon should match the label behaviour with movement.
The Code
The markup for the buttons is pretty simple:
For browser compatibility we use a span inside the a tag. You could replicate the same behaviour using multiple background images if you wanted, but only IE9+ would be supported.
The CSS uses a standard sliding-door technique to create scalable buttons. You could use border-image as well to make the markup simpler, but again browser support is spotty.
This code will provide a button that scales horizontally. While you could make it scale vertically as well (given a few changes to the aesthetic), I don’t think that is good design. It is best to stick to as few button configurations as possible.
It is important to also style the :focus selector. It is triggered when the user tabs through the page and very useful for keyboard navigation. I used the same graphics for both :focus and :active, but ideally you would create a style that stands out a bit more.
Disabling the user’s ability to select the text of the buttons via user-select: none; will make them feel more solid. If you are building a true webapp you may want to disable text selection across the board and selectively enable it on appropriate elements.
24 notes |#