I have a search form with a styled search box and button. I have

Question

0

Asked: May 24, 20262026-05-24T19:03:46+00:00 2026-05-24T19:03:46+00:00

I have a search form with a styled search box and button. I have

0

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