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.

 

[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.

 

[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.

 

[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.