CSS code to horizontally center a button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button layout

Description

CSS code to horizontally center a 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">

.button {<!--from  w  w w  . j  a v  a2  s . c o m-->
   width: 250px;
   display: block;
   margin: 0 auto;
   text-align: center;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(blue), to(#65a9d7));
   background: -webkit-linear-gradient(top, blue, #65a9d7);
   background: -moz-linear-gradient(top, blue, #65a9d7);
   background: -ms-linear-gradient(top, blue, #65a9d7);
   background: -o-linear-gradient(top, blue, #65a9d7);
   padding: 9.5px 19px;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
   -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
   box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
   text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
}
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
}
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
}


      </style> 
 </head> 
 <body> 
  <a class="button">Test</a>  
 </body>
</html>

Related Tutorials