Style Your Search Button!

January 23, 2007 on 1:19 pm | In Web Design |

Do you feel, like we do, that a grey search button is usually a misfit on a good page?

Firstly, when the rest of your page has been carefully colored, why should one part of it be dull?

Secondly, the grey button critter will stand out from its surroundings because of aforesaid dullness, and for this reason will attract visitors’ peripheral attention.

But you probably don’t want the visitor to be distracted by anything while you are moving him down your carefully planned eyepath, sooooooo…..

GET RID OF THE GREY and make the button blend in with its surroundings!

And if you want, change the color of the text while you’re at it.

You can do all this by using simple CSS commands. Here’s how (the ‘before’ and ‘after’ buttons are shown in the above graphic):

First of all, contain your whole search box code in a “div”. Define an id for it called, say, “mysearchbox”. Then define a class for the button called “.btn”, like this:

#mysearchbox .btn {
      color: #A90000;
      background-color:#FFD700;
      font-size:75%;
      text-decoration: none;
}

In your HTML code for the search box, go to the line defining the search button, and add styling like so:

input name=”sa” value=”Search Our Site” class=”btn” type=”submit”

… and kiss your dull grey search button goodbye!

Learn about our web design offerings