Rollover Buttons

@CreativeMindMay 24.2008

Hi there!

Anyone know how to make a rollover buttons using external style sheet with DIV tag?

I have attached 2 buttons in a zip file for testing. I usually use Dreamweaver CS3 to do my rollover buttons but I would like to learn how create it within the external style sheet. I also usually use TABLE and TR within the HTML page but would like to replace them with DIV tag. The external style sheet will control all the rollover buttons.

Thanks in advance!!

~~[upl-file uuid=d72c75a2-89dd-422a-ab39-b8fa93b868a2 size=804B]~~buttons.zip[/upl-file]

to post a comment

CSS

14 Comments(s) _↴

@CentauriMay 25.2008 — #The big question here is : Do you really need graphics at all ?

Those two images are simply different coloured text on the same background, and such rollover can be done easily with no grpahics at all. Assuming this is for the left menu on the page we have been discussing in the other thread, then the buttons and rollovers can be done simply with the addition of some css :

[CODE]#list li {
 list-style: none;
 margin-bottom: 2px;
 }
 #list a {
 display: block;
 width: 97px;
 text-align: center;
 line-height: 1.6em;
 text-transform: lowercase;
 text-decoration: none;
 color: #FFFFFF;
 font-weight: bold;
 font-size: 11px;
 height: 1.6em;
 background-color: #666666;
 }
 #list a:hover {
 color: #000000;
 }[/CODE]

@CreativeMindauthorMay 25.2008 — #Hi Centauri,

Alright, I guess that was a bad example and too simple of rollover buttons. Please see my attached zip file for more creative buttons.

Thanks!!

[upl-file uuid=1fc5a325-a30e-4c38-af7e-7cc18de36f48 size=3kB]buttons.zip[/upl-file]

@CentauriMay 25.2008 — #The first thing to do is to combine both the normal and rollover images into one image, with the rollover below the normal, as per the attached image. If this image is made a background to the appropriately sized <a>s, then all that needs to be done to show the rollover is shift the background position.

[CODE]#list {
 font-size: 12px;
 color: #000000;
 width: [COLOR="Red"]250px[/COLOR];
 float: left;
 padding: [COLOR="Red"]0px[/COLOR];
 }
 #list li {
 list-style: none;
 margin-bottom: 2px;
 }
 #list a {
 display: block;
 width: [COLOR="Red"]250px[/COLOR];
 text-decoration: none;
 color: [COLOR="Red"]#A13713[/COLOR];
 height: [COLOR="Red"]25px[/COLOR];
 [COLOR="Red"]background-position: left top;
 font-size: 1px;[/COLOR]
 }
 #list a:hover {
 background-position: left bottom;
 }
 #list #nav-contact a {
 background-image: url(images/Button_Contact.gif);
 }[/CODE]

The text size is reduced to 1px high and coloured to match the graphic background colour, which effectively hides it but still allows it to be read by screen readers. All that needs to be done for the other buttons is to give each id its appropriate graphic - the rollover is already done with the :hover background position. Note that I changed the width and padding of #list to suit, and the left margin of #content would also need to be changed to 250px to suit.

[upl-file uuid=59f100de-35df-4818-9217-f61e1e94b078 size=3kB]Button_Contact.gif[/upl-file]

@CreativeMindauthorMay 25.2008 — #Centauri,

What should the HTML code looks like with DIV tag?

Would it look something like:

[CODE]
 <div id="list">
 
 <ul>
 
 <li><a href="contact.html"><span>Contact Us</span></a></li>
 
 </ul>
 
 </div>
 [/CODE]

Thanks!

@CentauriMay 25.2008 — #For the above css, it would be similar to what you had in the zip file in the other thread, but the span is not needed :

[CODE]	<div id="list">
 <ul>
 <li id="nav-home"><a href="index.html">Home</a></li>
 <li id="nav-design"><a href="design.html">Site Design</a></li>
 <li id="nav-host"><a href="hosting.html">Hosting</a></li>
 <li id="nav-port"><a href="portfolio.html">Portfolio</a></li>
 [COLOR="Blue"]<li id="nav-contact"><a href="contact.html">Contact</a></li>[/COLOR]
 </ul>
 </div>[/CODE]

@CreativeMindauthorMay 25.2008 — #Centauri,

I tried what you did and it only shows the1 button. I have attached the HTML and the external style sheet for you to look at.

Thanks!!

[upl-file uuid=8d887f3a-d573-4da5-b114-aa434bee9fc5 size=1kB]DIV3.zip[/upl-file]

@CentauriMay 25.2008 — #Did you use the composite graphic I posted in post #4 ?

@CreativeMindauthorMay 25.2008 — #Very nice Centauri!!

I did know what the heck the image was in you zip file. I didn't know why you gave me back the buttons I gave you?? ha ha ha

I didn't let you borrow my buttons Centauri. ha ha ha

Also, it looks like in order to do this kind of rollover buttons, you need to put one on top of another image like you did. The 2 buttons MUST combine as 1 correct? Very interesting! When I am using Dreamweaver, you need 2 buttons to make a rollover buttons in order to make it work.

Alright, the example you show me is in a vertical alignment using list. If I wanted to make these rollover buttons work in a horizontal layout, how does that work? Do I need to take it out of the list?

Also, if a user have clicked on the button and it takes you to the next page, how do I show just the the button that been clicked on ? I wanted to let the user know what page they are on. It's a usability issue.

Thanks!

@CentauriMay 25.2008 — #The problem with using two separate images to do the rollover is that there is a delay whilst the second image is loaded when the rollover is first used. When both states are combined in the one image, there is no delay at all, and the css is simplified when a number of different buttons are used.

If you want the menu to be horizontal, it is just a matter of floating the <a>s and <li>s left so they sit beside each other.

@CreativeMindauthorMay 25.2008 — #Centauri, I tried to put the the <a>s and <li>s next to each other but I got nothing. Here is what I did:

[CODE]
  <div id="list">
 <ul>
 
   <li id="nav-home"><a href="index.html">Home</a><li id="nav-design"><a href="design.html">Site Design</a><li id="nav-host"><a href="hosting.html">Hosting</a><li id="nav-port"><a href="portfolio.html">Portfolio</a><li id="nav-contact"><a href="contact.html">Contact</a></li>
 
   </ul>
  </div>[/CODE]

I took out the ending </li> tag.

Thanks!

@CentauriMay 26.2008 — #No, no, no. The html does not change. Html [I]describes[/I] the [B]content[/B] - it is the css that defines the [B]look[/B], and this is all that needs to be varied tio change the look of things. removing the ending </li> tags is an error - put the html back the way it was :

[CODE]	<div id="list">
 <ul>
 <li id="nav-home"><a href="index.html">Home</a></li>
 <li id="nav-design"><a href="design.html">Site Design</a></li>
 <li id="nav-host"><a href="hosting.html">Hosting</a></li>
 <li id="nav-port"><a href="portfolio.html">Portfolio</a></li>
 <li id="nav-contact"><a href="contact.html">Contact</a></li>
 </ul>
 </div>[/CODE]

If you want this menu to be horizontal, some maths are needed. If the site #wrapper width is 800px, then 5 buttons across will be 160px each button. In the css it is then a matter of not floating the #list div, removing the width (to allow it to go right across), and setting the height. the <li>s and <a>s are floated left and the <a>s given the new width. The other list id's would also be given their background graphics (assuming you have done dual state graphics for the other buttons as well).

[CODE]#list {
 font-size: 12px;
 color: #000000;
 padding: 0px;
 [COLOR="Red"]height: 25px[/COLOR];
 }
 #list li {
 list-style: none;
 [COLOR="Red"]float: left;[/COLOR]
 }
 #list a {
 width: [COLOR="Red"]160px[/COLOR];
 text-decoration: none;
 color: #A13713;
 height: 25px;
 background-position: left top;
 font-size: 1px;
 [COLOR="Red"]float: left;[/COLOR]
 }
 #list a:hover {
 background-position: left bottom;
 }
 #list #nav-home a {
 background-image: url(images/Button_Home.gif);
 }
 #list #nav-design a {
 background-image: url(images/Button_Design.gif);
 }
 #list #nav-host a {
 background-image: url(images/Button_Hosting.gif);
 }
 #list #nav-port a {
 background-image: url(images/Button_Portfolio.gif);
 }
 #list #nav-contact a {
 background-image: url(images/Button_Contact.gif);
 }[/CODE]

@CentauriMay 26.2008 — #And just to show how things can be changed visually by only changing a few css properties, the buttons can be made to look more like buttons by putting coloured borders on them, and adjusting the div height and button width accordingly - changes to the above css code highlighted in red :

[CODE]#list {
 font-size: 12px;
 color: #000000;
 padding: 0px;
 height: [COLOR="Red"]27px[/COLOR];
 }
 
 #list a {
 width: [COLOR="Red"]158px[/COLOR];
 text-decoration: none;
 color: #A13713;
 height: 25px;
 background-position: left top;
 font-size: 1px;
 float: left;
 [COLOR="Red"]border: 1px solid #CC9966;
 border-right-color: #333300;
 border-bottom-color: #333300;[/COLOR]
 }[/CODE]

@CentauriMay 26.2008 — #...and if you want to make it look like the buttons are pressed on hover, reverse the border colours on hover :

[CODE]#list a:hover {
 background-position: left bottom;
 [COLOR="Red"]border-color: #333300 #CC9966 #CC9966 #333300;[/COLOR]
 }[/CODE]

Css styling can be fun sometimes ?

@CreativeMindauthorMay 26.2008 — #Thanks Centauri!!

I was able to get it align up horizontally.

Also in #CSS _↴

a real newbie problem.. need to make tahoma size 8 firefox browser, locating my index bar wrongly.How to make this function toggle

Success!

Help @CreativeMind spread the word by sharing this article on Twitter...

Tweet This

Rollover Buttons

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Rollover Buttons

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴