Creating pure CSS buttons

Creating custom buttons for forms and navigation used to be a very painful process. Typically it involved having to create custom images and either using a single, non-scalable image, or slicing images up and combining them using non-semantic markup. Thankfully, new capabilities in CSS and improvements in browser support now allow us to style custom buttons with pure CSS.

This allows us to create buttons that will scale along with other page content, look great on high-resolution displays, and save on both bandwidth and http requests. While exactly how a button is styled is up to the designer, usually it involves properties such as background colors, gradients, box-shadows, text-shadows, and border-radius.

Form submit button:

Call to action link:

Add to cart