Centering two buttons when one will be hidden at times - 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

Centering two buttons when one will be hidden at times

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

.rectangle { text-align: center; margin: auto; display: block; background: #f1f1f1; margin: 20px 0; padding: 20px; }


      </style> 
 </head> <!--  w w w  . j av  a2s.c o  m-->
 <body> 
  <div class="rectangle"> 
   <input type="button" value="Click Me!"> 
   <input type="button" value="Click Me, Too!" style="display:none;"> 
  </div> 
  <div class="rectangle"> 
   <input type="button" value="Click Me!"> 
   <input type="button" value="Click Me, Too!"> 
  </div> 
  <div class="rectangle"> 
   <input type="button" value="Click Me!" style="display:none;"> 
   <input type="button" value="Click Me, Too!"> 
  </div>  
 </body>
</html>

Related Tutorials