|
How to Use Rollover Buttons
Button Text
This library contains graphics and code for buttons that display rollover
effects like the button shown above. In the web graphics library, each button
page provides a three-section button graphic along with a block of style code
that you can cut-and-paste into the <head> section of your webpage. To
use a button follow the steps below.
1. Place the button graphic on your Web site.
2. Paste the associated style code in a <style></style> block in the <head> section
of your webpage, or paste it into a separate file with a .js file extension and place the line
shown below in the <head> section of your webpage.
<link rel=stylesheet type="text/css" href="filename.css">
3. Use the line below to place a button on your webpage.
<a class="rollover" href="URL">Button Text</a>
4. Edit the text URL to be the link for your button and edit the text Button Text to the
text for your button.
5. You can place as many buttons as you need on your webpage. You can arrange several buttons to form
a menu bar, but if you want to make a horizontal menu bar with no space between the buttons, in Internet
Explorer you need to put all the button links on one line.
6. You can edit the font-family, font-size, and color property of each button state to your choice,
then edit the padding property to center the button text vertically. Don't make the font-size plus two
times the padding larger than the height of one-third of the button graphic or the box containing the
graphic will expand and ruin the effect.
For more information about how the button works and how to create your own custom button, see the
article Create CSS Button Rollovers in the Design section of this website.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
TERMS OF USE
RSS Feed