input box css

Forms are an essential part of interaction on the Internet but they can look rather drab.modify the inputbox in my new module of css:

A simple input style property with css2:
CSS:
input .submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}



.button {
    border: none;
    background: url('buttnbg.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('buttnbg') no-repeat bottom left;
    padding: 2px 8px;
}

HTML:
  ‹ input type="submit" value="go!" class="submit" /›

CSS3 button style: It's a simple button we can create with transparent PNG  gradient background, border, border-radius, box-shadow, and text-shadow.

    .buttoncss3{
    background: #222 url(buttonbg.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    }


The CSS3 property included 

1. moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
2. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
3. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
4. border-bottom: 1px solid rgba(0,0,0,0.25); 

 We can also include gradient color with CSS3:

.button{
 color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:hover
 {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top,  #f88e11,  #f06015);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

CSS# Gradient: background: #0060df;

background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);

 background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );

Example2:

.button2 {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 24px;

    color: #FFF;

    padding: 5px 10px 5px 10px;

    border: solid 1px #CCC;

    background: #ba4742;

    text-shadow: 0px 1px 0px #000;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    box-shadow: 0 1px 3px #111;

    -moz-box-shadow: 3px 3px 1px #999;

    -webkit-box-shadow: 3px 3px 1px #999;

    cursor: pointer;

}

.button2:hover {

    background: #a33f3a;

}

Example3:

.button3 {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 24px;

    color: #FFF;

    padding: 5px 10px 5px 10px;

    border: 1px solid #999;

    text-shadow: 0px 1px 1px #000;

    text-decoration: none;

    border-radius: 25px;

    -moz-border-radius: 25px;

    -webkit-border-radius: 25px;

    background: #0060df;

    background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);

    background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );

    cursor: pointer;

}

.button3:hover {

    background: -moz-linear-gradient(90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);

    background: -webkit-gradient(linear, left bottom, left top, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78e2ff', endColorstr='#3944a8', GradientType=0 );

}

Example4:

.button4 {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 24px;

    color: #000;

    padding: 5px 10px 5px 10px;

    border: 1px solid #999;

    text-shadow: 0px 1px 1px #FFF;

    text-decoration: none;

    border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    background: #ffcc66;

    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);

    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );

    cursor: pointer;

}

.button4:hover {

    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);

    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );

}

Example5:

.button5 {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 24px;

    color: #FFF;

    padding: 5px 50px 5px 50px;

    border: 1px solid #999;

    text-shadow: 0px 1px 1px #666;

    text-decoration: none;

    -moz-box-shadow: 0 1px 3px #111;

    -webkit-box-shadow: 0 1px 3px #111;

    box-shadow: 0 1px 3px #111;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    background: #64a724;

    background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%);

    background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 );

    cursor: pointer;

}

.button5:hover {

    border: 1px solid #FFF;

}

Example6:

.button6 {

    font-family: "Arial Black", Gadget, sans-serif;

    font-size: 22px;

    color: #443333;

    padding: 5px 50px 5px 50px;

    border: 1px solid #999;

    text-shadow: 0px 1px 1px #CCC;

    text-decoration: none;

    -moz-box-shadow: 0 1px 3px #111;

    -webkit-box-shadow: 0 1px 3px #111;

    box-shadow: 0 1px 3px #111;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    background: #696969;

    background: -moz-linear-gradient(top, #d1d1d1 10%, #7b7b7b 60%, #696969 80%, #696969 100%);

    background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#7b7b7b), color-stop(0.4, #d1d1d1), color-stop(0.8, #7b7b7b), color-stop(.9, #696969), color-stop(0.9, #696969));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#7b7b7b', GradientType=0 );

    cursor: pointer;

}

.button6:hover {

    color: #000;

}

Example7 input field style:

input{  
        padding: 5px;  
        font-size: 15px;  
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        background: -webkit-gradient(linear, left top, left bottombottom,
 from(#bcbcbe), to(#ffffff));  
        background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
    }   

input:focus {  
        -webkit-box-shadow: 0px 0px 5px #007eff;  
        -moz-box-shadow: 0px 0px 5px #007eff;  
        box-shadow: 0px 0px 5px #007eff;  
    }  

How to Use above example in your page? 

First, copy the .button style and paste css page (external on internal 
area-in header between style tag).

and in HTML element where you want the button to be 
(eg.  <input type="submit" name="submit1" value="Submit" class="button" />). 
You can call CSS classes to any element such as link, p, span, div, 
input, button, etc.

Note: CSS3 button works  following browsers.

1. Mozilla Firefox – 3.6.14 : Excellent
2. Google Chrome – 9.0 : Excellent
3. Safari – 5.0.3 : Excellent
4. Opera 11.01 : Good
5. Internet Explorer 8 : Poor

  You can modify these examples to create unlimited text and box shadow, 
linear gradient and radius effects.