Creating Buttons that Appear Raised in CSS - 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

Creating Buttons that Appear Raised in CSS

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

body {<!--   w  ww .java2s . co m-->
   font: 12px "Tahoma", sans-serif;
   margin: 0;
   padding: 20px;
}
.yummy {
   color: #fff;
   padding: 4px 8px 5px;
   border: 1px solid #9fa3a7;
   text-decoration: none;
   text-shadow: 0 1px 0 rgba(0,0,0,0.3);
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   background-color: #008fcf;
   box-shadow:
   0 1px 0 rgba(0,0,0,.08),
   inset 0 1px 2px rgba(255,255,255,.67),
   inset 0 -1px 0 rgba(0,0,0,.14);
   background-image: -moz-linear-gradient(90deg, blue 0%, #c5c9cd 100%);
   background-image: -o-linear-gradient(90deg, blue 0%, #c5c9cd 100%);
   background-image: -webkit-linear-gradient(90deg, blue 0%, #c5c9cd 100%);
   background-image: linear-gradient(90deg, blue 0%, #c5c9cd 100%);
}


      </style> 
 </head> 
 <body> 
  <a href="#" class="yummy">Yum yum!</a>  
 </body>
</html>

Related Tutorials