CSS Rollover Buttons.

[slipd]

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.

 

[darreny]

http://css.maxdesign.com.au/index.htm

try that

 

[joeyjojo]

Easy peasy. Construct the list using

<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

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 )

 

[edwardcasbon1]

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

 

[slipd]

Thanks for the responce guys

I'm looking into it now!

Cheers,

SW.

 

[slipd]

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:

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

Cheers,

SW.

 

[lozza]

Add some padding

 

[slipd]

Add some padding

Thanks mate -

SW.

 

[slipd]

One more thing

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.

 

[lozza]

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

 

[slipd]

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

Thanks mate,

SW.