CSS Rollover Buttons.

Soldato
Joined
26 Feb 2004
Posts
4,800
Location
Hampshire, England.
Hey guys,

Is it possible to make rollover buttons in CSS without using any images – I would want to make them entirely out of code if possible, to be kept in a separate CSS file?

Any thoughts?

Or links :)

Cheers,

SW.
 
Easy peasy. Construct the list using
Code:
<ul>
<li><a href="one.htm">One</a></li>
<li><a href="two.htm">Two</a></li>
</ul>
And use a:hover for the rollover
Code:
ul {
list-style-type:none;
}
ul li {
display:inline;
}
ul li a {
color:#000;
}
ul li a:hover {
color:#fff;
background-color:#000;
}
Gives black links, which go to white with a black background (hopefully, unchecked :) )
 
Last edited:
Really quite easy mate, its just using the :hover of an anchor.

set up a list of links (to use as buttons), set the anchor as a block element so that it appears as a button.

then its simple as adding a different background/text whatever on the hover of the link.

eg.

a:link {
background: #000;
color: #fff;
}

a:hover {
background: #fff;
color: #000;
}

This will change the background and text colours of the links on hover.

Look into learning some CSS mate, its great and really helps bring a site on.

Hope that helps,

Edward
 
Hey guys,

Managed to sort out the css rollovers - v.easy ;)

I completely overlooked a whole chapter in my css guide...

One thing that isn't covered, but I think will be achievable, is the attribute to change the size of the rollover background? By default the background is flush to the text of my links - as per the pic:

untitledsy8.png


How can I change the size so there is a bit more space round the text :)

Cheers,

SW.
 
One more thing :p

How do I stop the attributes being applied to the pages links? What if I only want the rollover effect applied to the links in a certain 'div' say?

Cheers,

SW.
 
sam.wheale said:
How do I stop the attributes being applied to the pages links? What if I only want the rollover effect applied to the links in a certain 'div' say?

All the general page links that you want to be the same you can use what has been suggested above ie:

a:link {
background: #000;
color: #fff;
}

a:hover {
background: #fff;
color: #000;
}

If you want a specific area to be different say your Navigation (which is what i asume your looking for) then you would have your navigation in a DIV with the ID of say "nav"

Your CSS wolud then look like this:

#nav a:link {
background: #000;
color: #fff;
}

#nav a:hover {
background: #fff;
color: #000;
}

And the rules would only be applied to the link and hover within the nav div
 
Harib0 said:
All the general page links that you want to be the same you can use what has been suggested above ie:

a:link {
background: #000;
color: #fff;
}

a:hover {
background: #fff;
color: #000;
}

If you want a specific area to be different say your Navigation (which is what i asume your looking for) then you would have your navigation in a DIV with the ID of say "nav"

Your CSS wolud then look like this:

#nav a:link {
background: #000;
color: #fff;
}

#nav a:hover {
background: #fff;
color: #000;
}

And the rules would only be applied to the link and hover within the nav div
Sorted :p

Thanks mate,

SW.
 
Back
Top Bottom