How to Create Scroll-Over Buttons
To spruce up the design of a website and make it visually stimulating, you can add effects to interactive sections such as buttons for navigation. A method commonly used is a scroll-over or mouse-over effect. This allows visitors to recognize clickable parts of the website by scrolling over a button, which changes color or reveals text. You can create an easy-to-implement scroll-over effect with Cascading Style Sheets (CSS).
Other People Are Reading
Instructions
-
-
1
Open your image editing software, such as MS Paint, Photoshop or Corel Draw, and create your button. The image must be two buttons on top of one another. The top button is the button visitors see when your Web page loads. The bottom button is the one they see when they scroll over the top button. Save your image as a GIF file.
-
2
Insert the following HTML code, using an HTML editor such as Dreamweaver or FrontPage, to the Web page where you want the scroll-over effect to appear:
<a id="mybutton" href="#" title="ThisIsMyButton"><span>ButtonName</span></a>
Replace "#" with the URL you want visitors to go to after clicking the button.
-
-
3
Open a new file on your HTML editor, and type the following CSS code:
#mybutton
{
display: block;
width: 107px;
height: 23px;
background: url("mybutton.gif") no-repeat 0 0;
}
#mybutton:hover
{
background-position: 0 -23px;
}
#mybutton span
{
display: none;
}
Replace the button width with the width of the image you created. The height is the total height of one button. If the height of two buttons stacked is 46 pixels, then enter 23 pixels as the height. Replace "mybutton.gif" with the name of your image. Save your CSS file in the same directory as your Web page.
-
4
Edit your Web page to include your CSS file by adding the following code in the <head> section of the HTML:
<head>
<link rel="stylesheet" type="text/css" href="scrollover.css" />
</head>
Replace "scrollover.css" with the name of your CSS file.
-
1
References
- Photo Credit search , find, help, web button, button, question image by creative from Fotolia.com
