Center Submit button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

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

Description

Center Submit button

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">

.buttons{<!--  www.ja  v  a  2s.  c  o  m-->
   text-align:center;
}
.buttons a, .buttons button {
   display:inline-block;
   /*float:left;*/
   margin:0 7px 0 0;
   background-color:#f5f5f5;
   border:1px solid #dedede;
   border-top:1px solid #eee;
   border-left:1px solid #eee;
   font-size:12px;
   line-height:130%;
   text-decoration:none;
   font-weight:bold;
   color:#565656;
   cursor:pointer;
   padding:5px 10px 6px 7px;
   /* Links */
}
.buttons button {
   width:auto;
   overflow:visible;
   padding:4px 10px 3px 7px;
   /* IE6 */
}
.buttons button[type] {
   padding:5px 10px 5px 7px;
   /* Firefox */
   line-height:17px;
   /* Safari */
}
*:first-child+html button[type] {
   padding:4px 10px 3px 7px;
   /* IE7 */
}
.buttons button img, .buttons a img {
   margin:0 3px -3px 0 !important;
   padding:0;
   border:none;
   width:16px;
   height:16px;
}
button:hover, .buttons a:hover {
   background-color:#dff4ff;
   border:1px solid #c2e1ef;
   color:#336699;
}
.buttons a:active {
   background-color:#6299c5;
   border:1px solid #6299c5;
   color:#fff;
}
button.positive, .buttons a.positive {
   color:#529214;
}
.buttons a.positive:hover, button.positive:hover {
   background-color:#E6EFC2;
   border:1px solid #C6D880;
   color:#529214;
}
.buttons a.positive:active {
   background-color:#529214;
   border:1px solid #529214;
   color:#fff;
}
.buttons a.negative, button.negative {
   color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover {
   background:#fbe3e4;
   border:1px solid #fbc2c4;
   color:#d12f19;
}
.buttons a.negative:active {
   background-color:#d12f19;
   border:1px solid #d12f19;
   color:#fff;
}
button.regular, .buttons a.regular {
   color:#336699;
}
.buttons a.regular:hover, button.regular:hover {
   background-color:#dff4ff;
   border:1px solid #c2e1ef;
   color:#336699;
}
.buttons a.regular:active {
   background-color:#6299c5;
   border:1px solid #6299c5;
   color:#fff;
}


      </style> 
 </head> 
 <body> 
  <form name="form1" method="post" action=""> 
   <div class="buttons"> 
    <button type="submit" class="positive" name="save"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt=""> Save </button> 
    <a href="" class="regular"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt=""> Change Password </a> 
    <a href="" class="regular"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> Downloads </a> 
    <a href="#" class="negative"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> Cancel </a> 
   </div> 
  </form>  
 </body>
</html>

Related Tutorials