- 1.6k
- 5
- 25
- 53
Edited:
I think you are trying to do as diddone in this DEMO
THREE STATES OF BUTTON, NORMAL, HOVERThere are three states of a button: normal, ACTIVEhover and active
You need to use CSS Image Sprites for the button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}<!-- HTML -->
<input type="submit" value="" class="imgClass" />Edited:
I think you are trying to do as did in this DEMO
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
You need to use CSS Image Sprites for button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}<!-- HTML -->
<input type="submit" value="" class="imgClass" />Edited:
I think you are trying to do as done in this DEMO
There are three states of a button: normal, hover and active
You need to use CSS Image Sprites for the button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}<!-- HTML -->
<input type="submit" value="" class="imgClass" />Edited:
I think you are trying to do as did in this DEMO
HTML
<input type="submit" value="" class="imgClass" />
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
CSS:
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
You need to use CSS Image Sprites for button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}<!-- HTML -->
<input type="submit" value="" class="imgClass" />Edited:
I think you are trying to do as did in this DEMO
HTML
<input type="submit" value="" class="imgClass" />
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
CSS:
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
You need to use CSS Image Sprites for button states.
Edited:
I think you are trying to do as did in this DEMO
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
You need to use CSS Image Sprites for button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}<!-- HTML -->
<input type="submit" value="" class="imgClass" />Edited (As sugessted by Zach L):
I think you are trying to do as did in this DEMO DEMO
HTML
<input type="submit" value="" class="imgClass" />
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
CSS:
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
You need to use CSS Image Sprites for button states.
Edited (As sugessted by Zach L):
I think you are trying to do as did in this DEMO
HTML
<input type="submit" value="" class="imgClass" />
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
CSS:
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
You need to use CSS Image Sprites for button states.
Edited:
I think you are trying to do as did in this DEMO
HTML
<input type="submit" value="" class="imgClass" />
THREE STATES OF BUTTON, NORMAL, HOVER, ACTIVE
CSS:
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
You need to use CSS Image Sprites for button states.