CODEWITHSUNDEEP
htmlcssbuttonhrefsprite
Nohman
Nohman

Reputation: 121

Having a sprite image inside a button with text

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:

Language-button-no-hover

Hover:

enter image description here

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

Upvotes: 1

Views: 1031

Answers (4)

deepanchakravarthi
deepanchakravarthi

Reputation: 1

You can provide image display position as follows: 

display:inline-block

Upvotes: 0

mseifert
mseifert

Reputation: 5670

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

Upvotes: 3

Jatin
Jatin

Reputation: 3089

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

Upvotes: 0

Schien
Schien

Reputation: 3903

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

Upvotes: 1

Related Questions