Style an address link to make it look like an input button with CSS - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button

Description

Style an address link to make it look like an input button with 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">

a {<!--  ww  w  .jav  a 2  s .  c o  m-->
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border: 1px solid #aaa;
   color: #444;
   font-size: inherit;
   margin-bottom: 0px;
   min-width: 4em;
   padding: 3px 12px 3px 12px;
   font-family: sans-serif;
}
a:hover {
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
   background: #ebebeb -webkit-linear-gradient(blue, #f8f8f8 40%, #e9e9e9);
   border-color: #999;
   color: #222;
}
a:active {
   -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
   background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
   color: #333;
}


      </style> 
 </head> 
 <body> 
  <a>Click me</a>  
 </body>
</html>

Related Tutorials