When using mouse over we use two images for the mose over effect for writing css. We observed a delay
Images used are given below
Normal state:-
Over state:-
See below for normal sprite methos
shop-now-btn {
background: url("../images/btn-shopnow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 31px;
width: 129px;
}
shop-now-btn:hover {
background: url("../images/btn-shopnow-over.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
We changed the pattern of giving the class. Button are loading in one image is one of the solution to solve the issue. And class over effect is given like sprite method.
CSS:
shop-now-btn {
background: url("../images/btn-shopnow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 31px;
width: 129px;
}
shop-now-btn:hover {
background-position: 0 -33px;}
Thus by giving the position you can solve the delay issue.
