Having a sprite image inside a button with text

Question

I'm trying to create a button and here is the demo so far.

Right now I can't figure out how I can position the sprite image so that only the black icon is visible.

Does anyone know how I can fix this?

This is what I want to achieve with the button:

No hover:

Hover:

Here is the code I have:

HTML:

<a class="top-language" href="#" alt="Choose your language">Language</a>

CSS:

.top-language {
  border: 1px solid #ddd;
  padding: 5px;
  text-decoration: none;
  color: #000;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  padding-right: 10px;
  padding-left: 35px;
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}


 .top-language:hover {
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;   
}

Answer 1

This will work. Here is a jsfiddle

.top-language {
    border: 1px solid #ddd;
    width: 100px;
    color: #202020;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    font-weight: bold;
    font-size: 13px;  
    width: 80px;
    margin: 0;
    line-height: 22px;
    text-align: right;
    text-decoration: none;        
    background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
    }


.top-language:hover {
    background-position: bottom left;
    color: #d13030;  
    }

Answer 2

You can either:

a. reduce the height of the button;

b. increase the vertical gap between the two sprites in the image itself;

c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon

Answer 3

.top-language {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 13px;
  background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
  text-indent: -99999px;
}


.top-language:hover {
  background-position: 0 0;  
}

Answer 4

You can provide image display position as follows:

display:inline-block