Place div element inside 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

Place div element inside button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>

.button {<!--from w  w  w.j  a  v  a  2s  .  com-->
   width: 300px;
   height: 200px;
   background-color: yellow;
   position: relative;
   padding: 0px;
}
.child_top_left {
   position: absolute;
   top: 5px;
   left: 5px;
   background-color: blue;
}
.child_bottom_right {
   position: absolute;
   bottom: 5px;
   right: 5px;
   background-color: red;
}
.button_container {
   width: 300px;
   height: 200px;
}


      </style> 
 </head> 
 <body> 
  <button class="button"> 
   <div class="button_container"> 
    <div class="child_top_left">
      top-left 
    </div> 
    <div class="child_bottom_right">
      bottom-right 
    </div> 
   </div> </button>  
 </body>
</html>

Related Tutorials