HTML Form How to - Create Pure CSS Buttons from anchor








Question

We would like to know how to create Pure CSS Buttons from anchor.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!--   www .  j  a  v  a2 s . com-->
  background-color: #EE432E;
  background-image: -moz-linear-gradient(center top, #EE432E 0%, #C63929 50%, #B51700 50%,
    #891100 100%);
  border: 1px solid #951100;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 115, 100, 0.4) inset, 0 1px 3px #333333;
  color: #FFFFFF;
  font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 12px 0 14px;
  text-align: center;
  text-shadow: 0 -1px 1px rgb;
  padding: 4px;
  text-decoration: none;
}
</style>
</head>
<body>
  <a href="#"> Button </a>
</body>
</html>

The code above is rendered as follows: