Make buttons behind div it is in with CSS - 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

Make buttons behind div it is in with CSS

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

.addshade {<!-- w  w w .  j  a  v a 2  s .c  o m-->
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100000;
   background: rgba(0, 0, 0, 0.75);
   display: block;
}
.cbutton {
   cursor: pointer;
   display: inline-block;
   font-family: Roboto;
   font-weight: 700;
   font-size: 16px;
   border-radius: 5px;
   padding: 5px 6px;
   min-width: 90px;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   z-index: -1000;
   position: relative;
}


      </style> 
 </head> 
 <body> 
  <div class="addshade"> 
   <p class="description"></p> 
   <div class="options"> 
    <a class="buy cbutton whiteonpurple" target="_blank" href="">Buy</a> 
    <a class="hint cbutton whiteonblack" target="_blank">Hint</a> 
   </div> 
   <div class="info" style="display: none;"> 
    <div class="bar"></div> 
    <div class="rehints" id="" style="visibility: hidden;">
      10 REHINTS 
    </div> 
    <div class="hinter" style="visibility: hidden;"> 
     <div class="picture monophoto"> 
      <div class="text" style="font-size: 37px; margin-top: 4.375px;">
        SO 
      </div> 
      <div class="img" style="background-image: url(https://www.java2s.com/style/demo/InternetExplorer.png);" onclick="location.href='/user/filler';"></div> 
     </div> 
     <div class="content"> 
      <div class="one">
        Hinted by: 
      </div> 
      <div class="two"> 
       <a href="/user/sean12oshea">Sean O'Shea</a> 
      </div> 
     </div> 
    </div> 
    <div class="partnertext">
      Partnered Hint 
    </div> 
    <div style="clear:both;"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials