Jay, trying to remember...

CSS sprites for buttons

Found these login buttons online which have three states - normal, hover and visited. This makes them perfect to use as a CSS sprite, so here’s how that went down:

The CSS looks like this:

.signin_button {
  display: block;
  height: 22px;
  width: 150px;
  font-size: .1em;
}

#twitter_button {
  background: transparent url(/images/signin_twitter.png) top left no-repeat;	
}

#facebook_button {
  background: transparent url(/images/signin_facebook.png) top left no-repeat;	
}

#twitter_button:hover, #facebook_button:hover {
  background-position: 0px -24px;
}

#twitter_button:active, #facebook_button:active {
  background-position: 0px -48px;
}

span.hide {
  display: none;
}

and the HTML looks like this:

  

Note: display: none; is a no-no in terms of accessibility, but after the first couple accessibility-friendly attempts failed, I got lazy. Perhaps I should pursue a JavaScript solution, as I believe that screen readers interrupt the page pre-JS.


comments powered by Disqus