Change the Color of the Search Button

Author: David
Added: July 19, 2007

The default the color of form (search) buttons is gray but can he easily changed using the Cascading Style Sheets (CSS).

Here is the code you need to add to your CSS file to change the look of buttons displayed on your site:


input.btn {
   color:#000000;
   background:#ffffff;
   font:Verdana, Arial, Helvetica, sans-serif 85% bold;
   border:1px solid #000000;
}


With 'color' you set the text color used in form button.
With 'background' you set the background color of the button.
'Font' will set font used in buttons. This line will use Verdana, Arial or Helvetica as button text. The weight of the font will be 85% of the button weight and font will be bold. You can read more about CSS font properties on w3schools.
'Border' will set border of button. The above line will make the button border black 1px width solid line. Learn more about CSS button properties at w3schools.

When done with editing CSS add


class="btn"


If you want to use buttons with different styles just add a new style to your CSS file (you can use the code from your previous button) but be sure to change the name from input.btn to input.btn1. Edit to style to suit your needs and add 'class="btn1"' to your button code.

To see nice stylish buttons you just made you need to empty your cache or just press ctrl+f5 in FireFox or ctrl+refresh button in IE.

That's it!


Thanks to Kosir of SEO prijazen spletni imenik for this info.