Button active state offset via class - 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

Button active state offset via class

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

#buttons{<!--  w  ww  .  j a  v a  2 s .c  om-->
   position: absolute;
   top:10px;
   left:10px
}
.greenButtClass{
   z-index: 10;
   color: #ffffff;
   font-size: 22pt;
   width:200px;
   background-color:#7ac144;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius:35px;
   padding:8px;
   cursor:pointer;
   border:1px solid #7ac144;
}
.greenButtClass:hover {
   background-color:#6DA840;
}
.greenButtClass:active {
   position:relative;
   top:1px;
}
.seperate{
   position: relative;
   margin-bottom: 25px;
}
}


      </style> 
 </head> 
 <body> 
  <div id="buttons"> 
   <br> 
   <button id="places" class="greenButtClass">Button 1</button> 
   <div class="seperate"></div> 
   <button id="nature" class="greenButtClass">Button 2</button> 
   <div class="seperate"></div> 
   <button id="trails" class="greenButtClass">Button 3</button> 
  </div>  
 </body>
</html>

Related Tutorials