Styling the Submit Button in a Form - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input submit

Description

Styling the Submit Button in a Form

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

label {<!--from  w  w  w  .ja  v a  2  s  . c  o  m-->
   float: left;
   text-align: right;
}

input {
   width: 44%;
}

textarea {
   width: 99%;
   float: none;
   height: 300px;
}

input {
   float: left;
   padding: 20px;
   margin-bottom: 20px;
}

textarea,
input {
   border-radius: 5px;
   border: thin groove #000;
}

textarea:focus,
input:focus {
   outline: none;
   border: 1px solid #f00;
   /* create a BIG glow */
   box-shadow: 0px 0px 14px #f00;
   -moz-box-shadow: 0px 0px 14px #f00;
   -webkit-box-shadow: 0px 0px 14px #f00;
   border-radius: 5px;
}

.button input[type=submit] {
   background: #000;
   color: #fff;
}


      </style> 
 </head> 
 <body> 
  <form id="contact_form"> 
   <div> 
    <label for="name"></label> 
    <input type="text" name="Name" value="Enter Name" style="margin-right:20px;"> 
   </div> 
   <div> 
    <label for="email"></label> 
    <input type="text" name="Email" value="Enter Email"> 
   </div> 
   <div> 
    <label for="message"></label> 
    <textarea name="message" placeholder="Enter Message" id="message" rows="10" cols="50">        </textarea> 
   </div> 
   <div class="button"> 
    <input type="submit" value="send now" id="thesubmit"> 
   </div> 
  </form>  
 </body>
</html>

Related Tutorials