Responsive Panel with a sticky/responsive button at the 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

Responsive Panel with a sticky/responsive button at the bottom

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Paulie-D</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

.pricing-container {<!--  w w  w  . j a  va 2  s .co  m-->
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   justify-content: space-around;
}
.item-container {
   background: tomato;
   padding: 5px;
   flex:1 0 200px;
   margin: 10px;
   color: white;
   font-weight: bold;
   font-size: 12px;
   text-align: center;
   display: flex;
   flex-direction: column;
}
.item-header {
   background-color: gray;
}
.item-description {
   width: 90%;
   margin: auto;
   flex:1;
}
ul {
   list-style-type: none;
   padding: 0;
}
.item-footer {
   background: pink;
   padding: 10px;
   width: 80%;
   margin: auto;
   color: white;
   font-weight: bold;
   font-size: 12px;
   text-align: center;
   align-self: flex-end;
}
@media screen and (max-width:600px) {
   .pricing-container {
      flex-direction: column;
   }
   .item-container {
      flex:0;
   }
   .item-description {
      flex:0;
   }
   .item-footer {
      align-self: flex-start;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="pricing-container"> 
   <div class="item-container"> 
    <div class="item-header">
      Column 1 
    </div> 
    <div class="item-description"> 
     <ul> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 
    </div> 
    <div class="item-footer" style="position: relative;">
      NewRegister 
    </div> 
   </div> 
   <div class="item-container"> 
    <div class="item-header">
      Column 2 
    </div> 
    <div class="item-description"> 
     <ul> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 
    </div> 
    <div class="item-footer" style="">
      NewRegister 
    </div> 
   </div> 
   <div class="item-container"> 
    <div class="item-header">
      Column 3 
    </div> 
    <div class="item-description"> 
     <ul> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 
    </div> 
    <div class="item-footer" style="">
      NewRegister 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials