HTML Form How to - Create CSS3 Button with linear-gradient background and hover state for anchor

Question

We would like to know how to create CSS3 Button with linear-gradient background and hover state for anchor.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.bt {<!--  ww w  . ja v a 2s .  c om-->
  display: inline-block;
  text-decoration: none;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-border-radius: 4px;
  background: #2879a9;
  padding: 0 14px;
  border: 1px solid #2879a9; 
}
.bt:hover {
    background-image: -webkit-linear-gradient(bottom, #2879a9, #3491c0);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset; 
}
</style>
</head>
<body>
  <a class="bt" href=#">Button Test</a>
</body>
</html>

The code above is rendered as follows: