Introduction

CSS provides a whole variety of different tools which we may put together in different ways to create all manner of different things. In this challenge we will investigate several of them and how they may be put together to create fancy buttons.

You will investigate the following concepts:

• Rounded edges
• Drop shadows
• Gradients
• Hover
• Changing the cursor

Keep in mind that although we are using these methods to create fancy CSS buttons, all of these methods can be applied and work just the same on pretty much any other element on your page. Be creative and you can do some very interesting things on your pages with these.

If you're not familiar with HTML and CSS you may want to have a quick look over our HTML tutorial and CSS tutorial before having a go at this challenge.

Step 1 - The Template Code

Copy the starting template code below into a text file (remember to save with a .html extension) and open it up in a browser to see what it looks like.

For each of the steps below, make sure to save and view the file regularly so see what affect the elements you are adding and changing has on your page.

At the moment we have some simple content with a heading and 3 buttons. Over the rest of this challenge we will style the buttons and make them a bit more like actual buttons. We will do this by way of CSS, we won't really touch the HTML. If you really want to look at doing things right you might also investigate moving the CSS to an external linked file.

Step 2 - Let's add rounded corners

To add rounded corners we use the border-radius property. This can be done in a few different formats.

Within the rule for #button1 (Just under where it says Put your CSS for button 1 here) add the following property :

• border-radius: 20px;

Save your file and refresh it in the browser. You will see that Button 1 now has all 4 corners rounded with a radius of 20px. If we give only a single value then it will apply to all 4 corners.

Now within the rule for #button2 add the following property :

• border-radius: 20px 10px;

If we supply two values then the first value is the radius for the top left and borrom right corners and the second value is for the other two values.

Finally, within the rule for #button3 add the following property :

• border-radius: 20px 10px 30px 5px;

If we supply four values then they refer to each corner in turn starting from the top left corner.

Now experiment a bit and tinker with the corners. Can you Make button two so that two corners are rounded and two are square?

Step 3 - Style it up with drop shadows

Drop shadows are an effective way to give the elements on your page depth which helps to make your page jump out of the screen. They are a little tricky but are well worth the effort.

In it's basic format you use five values :

• How much to shift right (use negative values to shift left)
• How much to shift down (use negative values to shift up)
• Blur - how quickly the shadow gets fuzzy
• Spread - how far out the shadow goes (higher values create the illusion of the element being higher up)
• Colour (if you use rgba colour then you can also specify an opacity which helps to make the shadow more realistic)

Within the rule for #button1 add the following property :

• box-shadow: 5px 5px 9px 2px rgba(70, 70, 70, 0.7);

Save and view in the browser. Tweak some of the values to test what happens and get a feel for what they do.

As well as a shadow below the item (which creates the illusion that it is above the page), we may also put a shadow within the item (creating the illusion that the item is below the page). We do this by adding the inset keyword to the property.

Within the rule for #button2 add the following property :

• box-shadow: inset 3px 3px 6px 1px rgba(70, 70, 70, 0.7);

If you add a background colour to the button and make it a light shade of grey (or other colour) it helps with the illusion.

We can also chain together several shadows to create interesting effects.

Within the rule for #button3 add the following property :

• box-shadow: 5px 5px 0px 0px #508545, 10px 10px 0px 0px #6BB35D, 15px 15px 0px 0px #88E376;

You can chain together as many shadows as you like and they don't all have to go in the same direction. You can be quite creative with this and create many interesting effects.

Writing out the box-shadow property can be time consuming. Thankfully there are generators out there which can make things easier.

Now tinker with these shadows and see what effects you can create.

Step 4 - And now for Gradients

Your buttons should be starting to look quite fancy now. The next thing to add is a gradient. (a subtle gradient adds a nice bit of texture to the element helping to make it feel real).

The CSS for producing gradients is a bit more complicated so I would recommend using a generator. Have a look at a few generators and pick one which you like. Create a few different gradients and add them to your buttons.

Creating a vertical gradient with a light colour on top and a slightly darker shade of that colour on bottom creates a nice illusion of a rounded button.

Tinker and create a different gradient effect for each button.

Step 5 - Add Hover effects

Having the button change in some way when the user hovers their mouse over it gives feedback to the user that it is an interactive element. We do this by adding a new rule with the :hover keyword in the selector.

Add the following rule at the end of your CSS :

Refresh your browser and see what happens when you hover your mouse over Button 1. The styles that we have put in probably look pretty average as an effect. See if you can change the values and properties in this rule to make a more appealing hover effect.

Some things which work well :

• Make the change subtle, slightly lighten or darken the button colour.
• If you have a gradient on the button, reversing the gradient on hover creates a nice illusion of the button physically being pressed in.
• You could also increase or decrease slightly the drop shadow to make it look like the button has been raised or lowered.
• You could make a lighter, slightly different colour for the background to create the illusion that the button has been lit up.

Experiment with a different hover effect for each of the three buttons (add a new rule with :hover for the other two buttons).

Step 6 - Tinker!

Now you have all the elements you need to create some rather fancy buttons. Tinker with bringing them all together to create a set of coherent elements. Try and make your three buttons as different as possible but each just as stylish.

Here are some ideas for what you could try :

• Create a realistic metalic button
• Create a sci-fi style button (with nice electric blue, maybe even transparent)
• Create a Steam punk style button
• Create a cartoonish style button
• Create a sleek, high end looking button like you might find in a sports car
• Create a colourful button like you might see in a childrens app
• Can you create a round big red dome button with text something like "Don't press me"

Taking it Further

Adding effects is fun but it really works when all the effects come together to create a single coherent experience. Add other elements in (headings, paragraphs, lists, links, images etc), or use another page you've already created and add these various methods to those elements too to see how they can enhance those elements.

Experiment and see what you can come up with. Have fun!