Skip to content

Pure CSS3 Buttons

When you need to produce stunning buttons for use in modern browsers, use Pure CSS3 Buttons.

Place the CSS below in your stylesheet and attach a class of pure to the links you would like to style.


.pure {
 letter-spacing: 1px;
 display: inline-block;
 padding: 0.5em 3em;
 background-color: rgb(0,62,155);
 color: rgb(238,238,238);
 text-decoration: none;
 font-weight: bold;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0.05))); /* Saf4+, Chrome */
 text-shadow: rgb(68,68,68) 0 -1px 1px;
 box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 -webkit-box-shadow: 1px 1px 3px rgba(136,136,136,0.3);
 -moz-box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 }

.pure:hover {
 background-color: rgb(0,62,215);
 text-shadow: rgb(238,238,238) 0 0 2px;
 -webkit-transition: all 0.3s linear;
 }

.pure:active {
 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0.25)); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.05)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
 border-bottom: 1px solid rgba(0,0,0,0.1);
 }

To produce the colour you need for your buttons, change this one line of CSS in the .pure class and the hover state:


background-color: rgb(0,62,155);

The buttons use advanced styling that works in Safari 4, Chrome and Firefox 3.6. WebKit browsers also enjoy transition effects for the hover state.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 169 other followers