css rollover

Hai all,

I want create a simple button with css..

first there is link text (Like "Home")

if i rollover the link its should shows the bullet in the right side which is in separate table(gif image).

if i click the link that bullet image is still active where link page is there...

is it possible in css or any othere method...

i dont want javascript....

Please....

go to www.justalinkapart.com
Or something like that, the url may be wrong as in missing a dash, but the domain name itself is right. So do a search for just a link apart.
They have a tutorial on list menus, they show you how to make list menus and with that same code you can modify it to what you want.

As well, you could so something similar to this:

a.mymenu:link{your style}
a.mymenu:visited{your style, plus a few changes}
a.mymenu:hover{your setyles, plus background image}

I think it's like that, I don't use CSS often enough to remember everything.. But yeah, check out a list apart. Hope this helps.

Thanks....

But there is no link for justalinkapart.com.

i think its dead...

anyway thanks....

do u know any other site which covers this topic

Do you mean something like this:

<style type="text/css">

a.button:link
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-styleutset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}


a.button:visited
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-styleutset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}

a.button:active
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}

a.button:hover
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}

</style>

And then in the body:
<a href="http://www.cnn.com/" class="button">CNN</a>

Change the widths, colors, border accordingly.

Thanks corey...

this is work fine.. but i want the hover effect....

when the hover takes place a gif image in the right of the text will show..( its a bullet) actully its is separate TD.....

any idea...

The link that IBM recommended: http://www.alistapart.com/stories/ - as far as changing an image with only CSS - I do not think it can be done. CSS is design. You would need to implement ajavascript also.

actually, yes you can make roll over images using purely CSS...
alistapart actually shows you this to some extent.

for my example or ven coreys all you do is add a background image style to link, visited,click and on hover change that image.

I'm not going to give exact code, this has already been pretty much done in corey's example. So I leave it to you to find out how to add the backround styles..