CSS button Using CSS to style your web buttons and widgets

1. buttons

   • Countries
   • Fun
   • Political
   • Web Design
   • Internet
   • Linux
   • Large
   • Others

   guides

   • Forms
   • Button Maker

   blogs

   • Xerxy
   • SZ Blog

   links

   • Privacy Policy
   • Whatismycountry
   • Languages
   • Network Utils
   • WiMax Pakistan
   • Web Design

2. Input Boxes and Submit Buttons

   The days of bland web pages with ugly text and layout are long gone, but the parts that make up a form have largely remained unchanged. Here, I am attempting to describe various methods that may be used to enhance the look of your input fields and form buttons.

   -->

   Basic Form

   A very simple form might look like this:

   Name:
   Password:
   

   Code

   <form action="">
       Name: <input type="text" />
       Password: <input type="password" />
       <input type="submit" value="Submit" />
   </form>

   Enhanced Border

   We can improve on this by firstly changing the border of the form:

   Name:
   Password:
   

   Code

   <form action="">
       Name: <input type="text" class="input" />
       Password: <input type="password" class="input" />
       <input type="submit" value="Submit" class="input" />
   </form>

   CSS

   .input {     border: 1px solid #006; }

   Enhanced Background

   Now we work on the background:

   Name:
   Password:
   

   Code

   <form action="">
       Name: <input type="text" class="input" />
       Password: <input type="password" class="input" />
       <input type="submit" value="Submit" class="button" />
   </form>

   CSS

   .input {
       border: 1px solid #006;
       background: #ffc;
   }
   .button {
       border: 1px solid #006;
       background: #9cf;
   }
   

   Positioning

   Typically, a form and its labels are aligned with the help of tables. Tables are generally frowned upon these days for anything other than tabular data so it makes sense to use CSS for form layout.

   Here, we'll wrap the labels in the <label> tag and add some CSS for these to align them properly.

   Name:
   Password:
    

   Code

   <form action="">
       <label>Name: </label> <input type="text" class="input" />
       <label>Password: </label> <input type="password" class="input" />
       <label>&nbsp; </label> <input type="submit" value="Submit" class="button" />
   </form>

   CSS

   .input {
       border: 1px solid #006;
       background: #ffc;
   }
   .button {
       border: 1px solid #006;
       background: #9cf;
   }
   label {
       display: block;
       width: 150px;
       float: left;
       margin: 2px 4px 6px 4px;
       text-align: right;
   }
   br { clear: left; }
   

   Hover Effect

   We can build on the above to add a hover effect. Simply add another element followed by ":hover":

   Name:
   Password:
    

   Code

   <form action="">
       <label>Name: </label> <input type="text" class="input" />
       <label>Password: </label> <input type="password" class="input" />
       <label>&nbsp; </label> <input type="submit" value="Submit" class="button" />
   </form>

   CSS

   .input {
       border: 1px solid #006;
       background: #ffc;
   }
   .input:hover {
       border: 1px solid #f00;
       background: #ff6;
   }
   .button {
       border: 1px solid #006;
       background: #ccf;
   }
   .button:hover {
       border: 1px solid #f00;
       background: #eef;
   }
   label {
       display: block;
       width: 150px;
       float: left;
       margin: 2px 4px 6px 4px;
       text-align: right;
   }
   br { clear: left; }
   

   Using images for buttons

   Finally, here is an example of using CSS-enhanced images as the background for your buttons. Separate images for the unpressed button, hover effect and a pressed button may be used by simply setting the border to "none" and specifying the URL in the background value:

   Name:
   Password:
    

   Code

   <form action="">
       <label>Name: </label> <input type="text" class="input" />
       <label>Password: </label> <input type="password" class="input" />
       <label>&nbsp; </label> <input type="submit" value="Submit" class="button" /> <input type="submit" value="Cancel" class="button" />
   </form>

   CSS

   .input {
       border: 1px solid #006;
       background: #ffc;
   }
   .input:hover {
       border: 1px solid #f00;
       background: #ff6;
   }
   .button {
       border: none;
       background: url('/forms/up.png') no-repeat top left;
       padding: 2px 8px;
   }
   .button:hover {
       border: none;
       background: url('/forms/down.png') no-repeat top left;
       padding: 2px 8px;
   }
   label {
       display: block;
       width: 150px;
       float: left;
       margin: 2px 4px 6px 4px;
       text-align: right;
   }
   br { clear: left; }
   

   Grouping things together

   We can also group the elements together and separate them from the rest of the page by using the fieldset and legend elements.

   My awesome form

   Name:
   Password:
    

   Code

   <form action="">
    <fieldset>
     <legend>My awesome form</legend>
       <label>Name: </label> <input type="text" class="input" />
       <label>Password: </label> <input type="password" class="input" />
       <label>&nbsp; </label> <input type="submit" value="Submit" class="button" /> <input type="submit" value="Cancel" class="button" />
    </fieldset>
   </form>

   CSS

   .input {
       border: 1px solid #006;
       background: #ffc;
   }
   .input:hover {
       border: 1px solid #f00;
       background: #ff6;
   }
   .button {
       border: none;
       background: url('/forms/up.png') no-repeat top left;
       padding: 2px 8px;
   }
   .button:hover {
       border: none;
       background: url('/forms/down.png') no-repeat top left;
       padding: 2px 8px;
   }
   label {
       display: block;
       width: 150px;
       float: left;
       margin: 2px 4px 6px 4px;
       text-align: right;
   }
   br { clear: left; }
   

3.  
   

   -->

Theme by Thierry Koblentz :: TJK Design
Copyright © 2009 - A. Sajjad Zaidi