Your Customers are Mobile, you will be too …

In this tutorial we will be create some stylish buttons for your website using CSS3. These buttons degrade gracefully and will still look great on browsers that do not support the CSS3 standards.Simple changes to the css will change the button colors rather than having to swap images or use a sprite image and positioning.

We will be using just 1 image to give the button a shine but the color of the buttons can be changed just by altering the background color in the CSS. The image will be a 1 pixel by 20px high gradient image going from with at the top down to transparent part the way down. This way any background color we chose for the background with come through leaving the white to give our buttons a nice shining finish.

We will also be doing our CSS in such a way that if we decide to change the size of the text or other typography attributes the buttons will scale up or down to match it.

If someone using a browser that does not support CSS3 uses your site they will see the buttons normal just missing the text shadow. The buttons will still have the nice glossy finish to them and look very effective. They won’t know they are missing out on an even better looking button.

To show how the finished button will look in their hovered and un-hovered states here is a couple of images at 2 different sizes just to show you how well they scale up with just a touch of CSS.

Lets start off with the image. Open Photoshop or Fireworks or which ever image editing software tickle your fancy and create an image that is white at the top, turning to 0% opactiy about 25% of the way down the image. Re-size the image so that it is 1 px wide by 20px high. This will keep the image size down. Save in your images folder on your website and then lets get down to the CSS behind it all.

Each of the buttons I created has 2 classes attached to it. One is a button control that other is a class for that color. So once we are finished if we wish to change a buttons color we just change the second class. This gives us great flexibility in our design. It also means we can have a button that is a different color on the same page if needed.

We will start off with the button control class which I have called .btn

.btn {
  background: url("images/whiteshine.png") repeat-x scroll 0 0 transparent;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-weight: bold;
  padding: 5px 10px 6px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

Now make sure that you list this class above the color classes we will create further down. Other wise the buttons will be just white until they are hovered. We are using RGBA colors for our shadow effects in this button tutorial to help the shadows on the box and the text to blend into their surrounds making the text etc look like it belongs and keeping the button looking smooth.

We now create the buttons basic hover.

.btn:hover {
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

As the text and the buttons are changing color we are changing the shadow colors to suit and ensure readability no matter what is going on around it.

Now lets create the classes for the colors and their hover states.

.green {
background-color: #CCCCCC;
color: #141414;

}
.green:hover {
background-color: #00FF33;
color: #FFFFFF;
}
.blue {
background-color: #CCCCCC;
color: #141414;
}
.blue:hover {
background-color: #0066FF;
color: #FFFFFF;
}
.red {
background-color: #CCCCCC;
color: #141414;
}
.red:hover {
background-color: #CC0033;
color: #FFFFFF;
}

The basic class for each gives us our text color and sets the button to a grey background color when the button is not in use. The hover states change the buttons to their desired color. These can easily changed on the fly just by modifying the CSS colors for the class you wish to change.

And that is it for the CSS (unless you want add more colors) so now we move onto the HTML.

<div style="font-size:24px;">
  <div class="green btn">Add to Cart</div>
  <div class="red btn">View Cart</div>
  <div class="blue btn">Go to Check out</div>
</div>

To add two class to an object place a space in between them in the inverted comma’s. Each of the above buttons has 2 classes attach to them. So no if your hover the “View Cart” button it will apply the button class (handling the basic button functions) and the red class (handling its color attributes).

Note that I used an inline style to set the font size. This is only for testing purposes however any change to the typography used inside the button will cause the buttons to re-size to match and will keep its nice glossy finish.

Hope you have all learnt something helpful today and see you next time.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: