Center button in its container - 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

Center button in its container

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-subheading {
   height: autopx;
   width: 800px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   background:#dedede;
}
.button, button {
   color: #fff !important;
   font-size: -63px;
   line-height: 265%;
   text-decoration: none;<!--from w w  w  .j  a  va 2s  . c  o  m-->
   background-color: #167de4;
   padding: 0 20px;
   margin:auto;
   width:240px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
   -webkit-background-clip: padding;
   -moz-background-clip: padding;
   border: 1px solid #1d4ea4;
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.23),inset 0 1px 0 rgba(255,255,255,0.19);
   background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #3669ef), color-stop(100%, #4f95f4));
   background-image: -webkit-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
   background-image: -moz-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
   background-image: -o-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
   background-image: linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
   text-shadow: 0 1px 2px rgba(0,0,0,0.75);
   white-space: nowrap;
   text-overflow: ellipsis;
}


      </style> 
 </head> 
 <body> 
  <div id="button-subheading"> 
   <div class="button" href="#" style="opacity: 1;">
     Get started with a free 30-day trial 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials