Hypergurl Custom Form Buttons
Change the style of form buttons with CSS





Handy Tip: Creating normal form buttons is easy. However, the boring grey default color is usually not the nicest looking as far as design goes. Now with CSS you can customise the colors of your form buttons to better suit your webpage design.




Click here for more javascripts

Custom Form Buttons with CSS

With cascading stylesheets, you can change the look of form buttons easily.

By default, the color of form buttons are grey. Now using CSS you can change the color of form buttons, text size, font weight and border colors to suit the scheme of your site. Let's see how.

Change background color

To change the color of the button above we added this line of css code to the form html. STYLE="background-color:00BFFF"

You can use the hexidecimal value or simply red, white, blue, etc. If using hexidecimal values, do not place the # sign in front of the color code. Your css will not validate or work with Netscape.

Here is an example of the form html
<input TYPE="submit" VALUE="Buy Now" STYLE="background-color:00BFFF">

Change text size

To change the text size of form buttons add this line of code and change the size to suit
STYLE="font-size:8pt"

Change background color, font color and font size

STYLE="font-size:8pt; background-color:00BFFF; color:ffffff"

Change the border color

STYLE="border-color="red"

If you have more than one form button on a page, such as buy buttons for different products, you can change all the buttons by applying the stylesheet into the <head> of your html document. Remember that you don't need to add the # sign when using hex color codes with css.

(If you want to copy the code below take it from the text area.)

<STYLE type="text/css">

INPUT { background-color: blue;
border-color: efefef;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt;
}

</STYLE>


CSS is simply fantastic!



 
Search Site
Custom Search





Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com