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;  
    }