How to design forms in CSS
<strong>Make Beautifull Contact Forms in CSS</strong> by this simple css tutorial. Just download this file and make experiments with colors and shadows.Best tutorial of Css forms.
by Nikhil Mangal
October 31, 2014
HTML
<div id="form">
<div class="col">
<h1>Contact Us</h1>
</div>
<div class="col">
<label>Name</label><input type="text" placeholder="Enter Your Name" />
</div>
<div class="col">
<label>Email</label><input type="text" placeholder="Enter Your Email" />
</div>
<div class="col">
<label>Website</label><input type="text" placeholder="Enter Your Website" />
</div>
<div class="col">
<label>Message</label><input type="text" placeholder="Enter Your Message" />
</div>
<div class="col buttons">
<input type="submit" value="Send It Now" />
<input type="reset" value="Cancel" />
</div>
</div>
CSS
body{
font-family:Arial, Helvetica, sans-serif;
}
#form
{
background:#59c03d;
width:300px;
padding:20px;
font-size:14px;
color:#fff;
}
#form h1
{
font-weight:normal;
margin:0px;
padding:0px;
}
#form label
{
display:block;
margin:15px 0px 5px 0px;
}
#form input[type="text"]
{
width:94%;
padding:8px 2%;
border:none;
border:solid 2px #49ae2e;
}
#form .buttons
{
margin:20px 0px 10px 0px;
}
#form .buttons input[type="submit"],#form .buttons input[type="reset"]
{
background:#fff;
border:none;
color:#666;
padding:5px 10px;
font-size:17px;
cursor:pointer;
}
#form .buttons input[type="submit"]:active,#form .buttons input[type="reset"]:active
{
position:relative;
top:1px;
}