How to make sexy buttons with CSS
Popularity Report
 |
|||
|
|||
|
|||
|
|||
|
|||
|
Rank
URL Tag Cloud
Bookmark History
Saved by 97 people (0 private), first by anonymouse user on 2007-05-07
Public Sticky notes
How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get:
Sliding doors
Since we want our buttons to be über-flexible, we'll have to make the background image expand with the size of the button's text. For that, we'll use the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image.
Our button will be a basic <a> tag with a nested <span>, each containing a different slice of the background image. Here's what the HTML looks like:
Highlighted by missiontobe
Highlighted by sueblimely
Highlighted by kubano
Public Comment