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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

1
2
3
4
5
6
7
8
9
10
11
12

  <p>
    <a class='signin_button' href='/oauth/create' id='twitter_button'>
      <span class='hide'>
        Sign in with Twitter.
      </span>
    </a>
    <a class='signin_button' href='/oauth/create' id='facebook_button'>
      <span class='hide'>
        Sign in with Facebook.
      </span>
    </a>
  </p>

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.

Posted: March 14th, 2010 | Author: jay | Filed under: Code | Tags: , , , , , | No Comments »