Add box-shadow to <button> - 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

Add box-shadow to <button>

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

button {<!--  w w w . jav  a2s.c o  m-->
   -webkit-appearance: none;
   border: none;
   background: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
}
button.pushable {
   text-transform: uppercase;
   font-weight: bold;
   border: 3px solid black;
   padding: 10px 35px;
   border-radius: 2em;
   display: block;
   background-color: #fff;
   box-shadow: 0px 4px 0px -2px #bfbfbf, 0px 5px 0px 0px black;
}
button.pushable:hover {
   transform: translate(0px, 5px);
   box-shadow: 0px 0px 0px 0px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <button class="pushable">A simple button</button>  
 </body>
</html>

Related Tutorials