Drop-Shadow Rollover in CSS

    ●   Add Drop-Shadow rollovers to your button text.

Learn About:

Code HintsDrop Shadowa:hover

  •   This tutorial is part of the Art Genre, What in the World? and Portfolio Projects.

This tutorial is part of a series:

1 - Navigation using List Tags     2 - Drop Shadow Rollover     3 - Gradient Rollovers     4 - 101_links_Dw.htm  

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open your Index Page in Dreamweaver~

Last time you worked on Navigation using List tags in CSS.

This time, we create Drop Shadows for your Rollovers.


Open your style sheet again by Double-Clicking it.

Step #2: a:hover ~

Look for your a:hover tag - yours may looks different, or you have to make one yourself …

… and type this code:

Step #3: Add the Drop Shadow ~

Complete the code as follows:

!Try different things! Be creative!

Step #4: Text Color ~

Change the color of your rollover text by typing:

!Try different things! Be creative!

Step #5: Text Shadow Generator ~

Experiment! Try different settings! Be creative! Go to the following website and pick your own text shadow settings …

!Try different things! Be creative!

Make sure your drop-shadow is unique!

Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working on 103_nav_gradient_Ps.htm

Other Resources: and