Create panel with button bar at bottom - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button style

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

Description

Create panel with button bar at bottom

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

.container{<!-- www.  ja  v  a2  s.c  o  m-->
   max-width:1100px;
   height:1500px;
   margin:0px auto;
   border:1px solid navy;
}
.games {
   max-width:calc(100% - 169px);
   height: 700px;
   position:relative;
   border:1px solid black;
}
.games-fluid-left {
   display:inline-block;
   width:calc(46.75% - 30px);
   height: 270px;
   border: 1px solid black;
   border-radius: 5px;
   position:relative;
   float:left;
   margin-left:4.3%;
   margin-top:35.5px;
}
.games-fluid-right {
   display:inline-block;
   width:calc(46.75% - 30px);
   height: 270px;
   border: 1px solid black;
   border-radius: 5px;
   position:relative;
   float:left;
   margin-left:35.5px;
   margin-top:35.5px;
}
.games-fluid-right p , .games-fluid-left p{
   text-align: center;
   font-size: 20px;
   color:black;
}
.gamebuttons-container{
   display: flex;
   justify-content: space-around;
   position:relative;
   height:50px;
   max-width:100%;
   margin:175px auto;
   border:1px solid red;
}
.gamebuttons-container  a {
   float:left;
   padding: 8px;
   font-size:14px;
   border: 1px solid black;
   padding-top: 3px;
   padding-bottom: 3px;
   border-radius:5px;
   width:60px;
   background-color:black;
   color:white;
}


      </style> 
 </head> 
 <body> 
  <div class="games" <div> 
   <article class="games-fluid-left" id="tic-tac-toe"> 

    <p>poker</p> 
    <div class="gamebuttons-container"> 
     <p> <a>button1</a> </p> 
     <p> <a>button2</a> </p> 
     <p> <a>button3</a> </p> 
     <p> <a>button4</a> </p> 
    </div> 
   </article> 
   <article class="games-fluid-right" id="chess"> 

    <p>fortuna</p> 
    <div class="gamebuttons-container"> 
     <p> <a>button1</a> </p> 
     <p> <a>button2</a> </p> 
     <p> <a>button3</a> </p> 
     <p> <a>button4</a> </p> 
    </div> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials