CSS layout buttons with empty content - 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 layout buttons with empty content

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>CSS Problem</title> 
  <meta charset="utf-8"> 
  <style>

.mainBorder {<!--from w  w w. j a  va 2  s  .  co  m-->
   background-color: #254669;
   box-sizing: border-box;
   display: table;
   padding: 20px;
   width: 100%;
}
button {
   background-color: #254669;
   border: 1px solid #53779d;
   color: white;
   display: table-row;
   font-family: Verdana;
   font-size: 13px;
   height: 24px;
   outline: medium none;
   padding: 0 8px 1px;
   position: relative;
   transition: all 150ms ease-out 0s;
   vertical-align: middle;
}
button:disabled {
   opacity: 0.65;
}
button:enabled {
   cursor: pointer;
}
button:hover:enabled {
   background-color: #53779D;
}
button:active:enabled > span.content {
   display: inline-block;
   transform: translateY(-1px);
}
button:focus {
   border-color: white;
}
button.iconButton {
   width: 24px;
   padding: 0;
}
span.icon {
   display: block;
   height: 16px;
}

      </style> 
 </head> 
 <body> 
  <h1>Button</h1> 
  <div class="mainBorder"> 
   <button> <span class="content">Default</span> </button> &nbsp;&nbsp;&nbsp; 
   <button class="iconButton"> <span class="icon"></span> </button> &nbsp;&nbsp;&nbsp; 
  </div>  
 </body>
</html>

Related Tutorials