CSS .active & .hover delay?

I have a search form with a styled search box and button. I have the button styled with CSS .active & .hover classes. Everything is fine and it looks great however, I'm experiencing a short delay between normal, hover & and active states of the search button (the button will blink between states then states will load seamlessly afterwards.

I was wondering if there is a way to load the CSS on page load with a bit of javascript or if there is another method of getting the button to work seamlessly between states. Any suggestions?

CSS:

fieldset.search {
    border: none;
    width: 480px;
    background-image: url(images/searchbackground.png);
    background-repeat: no-repeat;
    padding-top: 36px;
    padding-right: 20px;
}
.search input, .search button {
    border: none;
    float: left;
}
.search input.box {
    color: #690;
    font-size: 1.2em;
    width: 427px;
   开发者_如何学C height: 25px;
    margin-right: 7px;
    padding-left: 5px;
    padding-bottom: 3px;
    padding-right: 4px;
    margin-left: 7px;
}
.search button.btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
    text-indent: -9999px;
    background: url(images/search.png) no-repeat top right;
}
.search button.btn:hover {
    background: url(images/search_hover.png) no-repeat top right;
}
.search button.btn:active {
    background: url(images/search_active.png) no-repeat top right;
}

HTML:

<form name="form" action="search.php" method="get">
  <fieldset class="search">
    <input type="text" class="box" name="q" />
    <button class="btn" name="Submit">Search</button>
  </fieldset>
</form>

I believe you are experiencing a flicker effect because the images aren't loaded by default.

To prevent this you may want to look into the next pages: http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/

And even better is if you use an all-in-one image called a sprite: http://css-tricks.com/158-css-sprites/

You can preload the images with javascript/jquery like seen in this: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript