Floating center button with floated left parts - 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

Floating center button with floated left parts

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 {<!--  w w  w. jav  a  2  s  . c o  m-->
   height: 40px;
   margin: 0 auto;
   text-align: center;
   display: inline-block;
}
#b-left, #b-right, #b-center {
   display: inline;
   float: left;
   height: inherit;
}
#b-left {
   background-color: blue;
   width: 30px;
}
#b-right {
   background-color: green;
   width: 30px;
}
#b-center {
   background-color: yellow;
}
#parent {
   text-align: center
}


      </style> 
 </head> 
 <body> 
  <div id="parent"> 
   <a id="button" href="#"> 
    <div id="b-left"></div> 
    <div id="b-center">
      Content 
    </div> 
    <div id="b-right"></div> </a> 
  </div>  
 </body>
</html>

Related Tutorials