Make a Rollover Button in Expression Web

Back to the tutorials page

Find 2 images that you want to use.  One for the before and one for the hover effect.  Resize them to fit the button size, or change the button sizes as you go thru the tutorial.  Import the images into your site.

Insert a div.  Name the div Button1.  Insert your 1st image in this div.  Hyperlink the image like you do any other hyperlink.  The styles below are what you need to make so that your button will have the rollover effect.  Replace my url  in red with your own image url.  After you have created all the styles, apply the .nav style to your div Button1. 

Your html code should look like this:

<div id="Button1" class="nav">
<a href="your hyperlink"><span>Menu Name</span>
<img alt="alternate text" height="44" src="acid_rain.jpg" width="200" /></a></div>

Your stylesheet should look like this:


.nav
{
position: relative;
font-family: "Calisto MT", "Comic Sans MS", Arial, Helvetica, sans-serif;
background: url('aqua_rust.jpg') no-repeat;
display: block;
width: 200px;
height: 44px;
margin: 0;
padding: 0;
white-space: nowrap;
}
.nav img
{
width: 200px;
height: 44px;
border: 0;
}
.nav a
{
display: block;
color: #000000;
font-size: 20px;
width: 200px;
height: 44px;
display: block;
float: left;
color: #FFFFFF;
text-decoration: none;
}
a:hover
{
visibility: visible;
}

.nav a:hover img
{
visibility:hidden
}

.nav span
{
position: absolute;
left: 45px;
top: 12px;
margin: 0px;
padding: 0px;
}

Trademark Disclaimer - Expression Web is the Trademark of and the property of Microsoft Corporation. Microsoft is not affiliated with Certain Web Design or this website, nor is Certain Web Design sponsored by Microsoft Corp.

©2009-2015 Certain Web Design, All Rights Reserved.