Button horizontal align and size stretch with text size - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

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

Description

Button horizontal align and size stretch with text size

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

.horizontal {<!--  w w  w .j a v  a 2s . c om-->
}
.myButton div {
   display: inline;
   padding-bottom: 11px;
}
.myButton {
   height: 30px;
}
.left {
   background-image: url("https://www.java2s.com/style/demo/Safari.png");
   height: 30px;
   width: 4px;
   padding-right: 4px;
}
.middle {
   background-image: url("https://www.java2s.com/style/demo/Safari.png");
   height: 30px;
   padding-left: 5px;
   padding-right: 5px;
   text-align: center;
}
.right {
   background-image: url("https://www.java2s.com/style/demo/Google-Chrome.png");
   height: 30px;
   width: 4px;
   padding-right: 4px;
}


      </style> 
 </head> 
 <body> 
  <div class="horizontal"> 
   <div class="myButton"> 
    <div class="left"></div> 
    <div class="middle">
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
      some text asdfasdfasfasddfadfas 
    </div> 
    <div class="right"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials