CODEWITHSUNDEEP
imagecssbutton
asf
asf

Reputation:

Button Hover Effect

I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.

There is a button called download and in hover code I add:

.button:hover{
    background-image:url(images/button2.png);

}

The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?

EDIT: I tried using preloading,but there is also a kind of delay

div#preloadedImages
{
    width: 0px;
    height: 0px;
        background-image: url(images/button2.png);

}

Upvotes: 1

Views: 1314

Answers (3)

prageeth
prageeth

Reputation: 7405

Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.

<img src="images/button2.png" style="display:none;"/>

Upvotes: 0

VIDesignz
VIDesignz

Reputation: 4783

Create a single image out of the two images (which is called a sprite)

Here is a working example with an animation as well to show you how it works.

Click here >>> FIDDLE

Then set your background position to to show the normal state of the background image

 .button {
    width: 150px;
    height: 50px;
    background-image: url('image-sprite.jpg');
    background-position:  left top;
}

Then on your hover css, just move the background image to show the lower part of it

.button:hover {
    background-position: left bottom;
 }

Upvotes: 0

Mateusz Hajdziony
Mateusz Hajdziony

Reputation: 109

You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.

On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.

Upvotes: 0

Related Questions