Change button bottom for click - 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

Change button bottom for click

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

a:active,<!--  w  w  w. ja v a 2s .com-->
a:focus {
   outline: none;
}
.mydesign{
   /*animation*/
   -webkit-animation:240s linear 0s alternate none infinite abr;
   -moz-animation:240s linear 0s alternate none infinite abr;
   -ms-animation:240s linear 0s alternate none infinite abr;
   -o-animation:240s linear 0s alternate none infinite abr;
   animation:240s linear 0s alternate none infinite abr;
   float:right;
   /*box-shadow*/
   -webkit-box-shadow:0px 3px 20px #4C4C4C inset;
   -moz-box-shadow:0px 3px 20px #4C4C4C inset;
   box-shadow:0px 3px 20px #4C4C4C inset;
   direction:rtl;
   height:140px;
   background:#000;
   width:770px;
}
.mydesign a{
   /*animation*/
   -webkit-animation:1s linear 0s alternate none infinite shatel;
   -moz-animation:1s linear 0s alternate none infinite shatel;
   -ms-animation:1s linear 0s alternate none infinite shatel;
   -o-animation:1s linear 0s alternate none infinite shatel;
   animation:1s linear 0s alternate none infinite shatel;
   position:relative;
   color:rgba(255,255,255,1);
   text-decoration:none;
   background-color:rgba(219,87,5,1);
   font-family:yekan;
   font-weight:normal;
   font-size:2em;
   display:block;
   padding:5px;
   /*border-radius*/
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   /*box-shadow*/
   -webkit-box-shadow:0px 9px 0px blue, 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow:0px 9px 0px blue, 0px 9px 25px rgba(0,0,0,.7);
   box-shadow:0px 9px 0px blue, 0px 9px 25px rgba(0,0,0,.7);
   margin:30px auto;
   width:560px;
   text-align:center;
   /*transition*/
   -webkit-transition:all .1s ease;
   -moz-transition:all .1s ease;
   -o-transition:all .1s ease;
   transition:all .1s ease;
}
.mydesign a:active{
   /*box-shadow*/
   -webkit-box-shadow:0px 3px 0px blue, 0px 3px 6px rgba(0,0,0,.9);
   -moz-box-shadow:0px 3px 0px blue, 0px 3px 6px rgba(0,0,0,.9);
   box-shadow:0px 3px 0px blue, 0px 3px 6px rgba(0,0,0,.9);
   position:relative;
   top:6px;
}


      </style> 
 </head> 
 <body> 
  <div class="mydesign"> 
   <a href="javascript:void(0)">Test</a> 
  </div>  
 </body>
</html>

Related Tutorials