Rollovers

[_tina_]

Hi,

 

I have a button as follow:

 

#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;		
width:130px;
height:31px;
border:0; 
}

 

I need to make a rollover.  This is one image, same as this method:

http://www.nowcss.com/links/image-rollover-with-css

 

I tried it this way

#memberlogin a.login span { 
        display: none; 
}

#memberlogin a.login:hover { 
        background: url(/images/memberlogin_btn.gif) repeat 0px -31px; 
}

but it's not working, do you know what I'm doing wrong here?

 

Thanks in advance.

[JustLikeIcarus]

The way that article shows how to do this is in my opinion not the best.  Try it this way, youll get better results in the end.

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

[haku]

It depends on what you need your buttons to do. If you need a flexible-width button, the second method was fine, but if it's fixed width, the first one was fine, though I wouldn't do it exactly the way they did. I do mine like this:

 

First, lets imagine we are using the image from the first tutorial:

 

HTML:

<a href="#" id="target">Link</a>

CSS:

a#target
{
  height:0;
  padding-top:44px; // this is half the height of the whole image, since we only want to show the top half of the image
  width:123px; // this is the width of the image
  overflow:hidden;
  line-height:1.1em; // without this, some of the text is visible in Safari and Opera
  background:url(http://www.nowcss.com/wp-content/uploads/2007/01/rss-feed-img.png) no-repeat left top;
}

a#target:hover
{
  background-position:left -44px; // we move the background image up, so that now the bottom half the image is visible
}