Themergency fooplugins.com
preview

Yet Another CSS3 Button Tutorial

| 0 comments

I am in the process of creating a WordPress theme framework of sorts and the one thing I wanted to nail down over the past weekend was my shortcodes. In doing so, I wanted to find and use the best CSS buttons I could find out there. I found some pretty tuts/posts but none of them nailed down all my requirements completely.

A Preview Before The Code

Straight to the point and probably what most of you came here to see. Click on the preview image below to view the stand-alone demo.


Pats on the Back

Now before I claim these buttons as mine entirely (which I wont), I first want to specify that I could not have done it without the help of these awesome sites:

  • Scalable CSS Buttons Using PNG and Background Colors
  • Rediscovering the Button Element
  • Super Awesome Buttons with CSS3 and RGBA

My Requirements

This is what I wanted from my CSS buttons:

  1. They must look awesome :)
  2. They must be easily configurable.
  3. They must work for both ‘button’ and ‘a’ HTML tags.
  4. They can have any background color!
  5. Icon images must just work.
  6. No extra HTML span must be needed. (think sliding doors)
  7. No javascript must be required.
  8. Must work in all major browsers. And at least look semi-decent in IE.

Installation

Installing and using the CSS is really simple. It comprises of 2 CSS files, one of which must be added using conditional comments to target IE. This is the code you must add to your page head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/></p>
<link rel="stylesheet" href="css/buttons.css" type="text/css" media="screen" />
<!--[if lt IE 9]></p>
<link rel="stylesheet" href="css/buttons-ie.css" type="text/css" media="screen" />
<![endif]-->

Note that I also have a meta tag in my head above. This is for IE9 beta, so that it renders correctly and doesn’t fall back to IE8 rendering mode.

Showing the default button is child’s play. The markup using a button tag :

<button class="btn">Click me</button>

which gives you :

or as an anchor HTML tag :

<a href="#" class="btn">Update</a>

This gives you : Update

Configuration Options

It is really simple to change the configuration of your buttons or links. Simply add classes to the markup. But always remember to include “btn”. Here are some examples:

CSS class Explanation demo
default the default button
medium medium size button
large large size button
inverse inverse hover effect
round more rounded button
stripe Striped background button

Any Background Color

You can use any background color you wish and the buttons will work as desired. In the demo you will notice I specify some background colors by an inline style e.g. style=”background:#ff0000″. I do also realise that alot of people will want to use css classes for the common colors, so those are included too:

CSS class demo
blue
red
orange
yellow
babyblue
lime
purple
white
green
brown
navy
pink

Also note that if you want black text instead of the default white, then add the blacktext css class.

Icons Too Please

I also wanted icons to work nicely, so all you need to do is include the appropriate image tag inside your anchor tags, then include an “img” class on your anchor and you are done. Here is an example:

<br />
<a href="#" class="btn large round stripe img brown"><img src="img/email.png" />Send Me An Email</a><br />

And that gives you this:
Send Me An Email

What About IE?

So what does it look like in IE? Well obviously not as nice. The CSS3 rounded corners and shadows don’t work in IE8, 7 and 6. But I have given it a nice border so it looks semi-decent. Here are screenshots for IE6, IE7 and IE8 repectively:


And The Other Browsers?

Well we can’t just leave it at IE. We need to check in all major browsers, so here are screenshots for all the others:


Download

I have created a zip containing the demo with all html, css and images included. So please download it and use these buttons as you like. Edit, modify, play, whatever you like. Again, if this has helped you then all I ask for is a donation. I hope you like them!

0 comments
  Livefyre
  • Get Livefyre
  • FAQ