HTML Form How to - Create css3 buttons with hover effect








Question

We would like to know how to create css3 buttons with hover effect.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a.button {<!--  w w w.ja  v a2s  .  co  m-->
  color: white;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  padding: 6px 20px;
  border-radius: 5px;
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -5px 20px
    rgba(0, 0, 0, 0.4);
}

a.button:hover {
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -5px 20px
    rgba(0, 0, 0, 0.4), 0px 2px 6px rgba(0, 0, 0, 0.4);
}

a.button:active {
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px 5px 20px
    rgba(0, 0, 0, 0.4);
}

a.button.default {
  background: #555;
  border: 1px solid #333;
}

a.button.orange {
  background: #f50;
  border: 1px solid #930;
}

a.button.red {
  background: #f00;
  border: 1px solid #800;
}

a.button.blue {
  background: #0050FF;
  border: 1px solid #003099;
}

a.button.green {
  background: #32CD32;
  border: 1px solid #196719;
}

a.button.white {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
  background: #efefef;
  border: 1px solid #ddd;
}
</style>
</head>
<body>
  <a class="button default">my button</a>
  <a class="button orange">my button</a>
  <a class="button red">my button</a>
  <a class="button blue">my button</a>
  <a class="button green">my button</a>
  <a class="button white">my button</a>
</body>
</html>

The code above is rendered as follows: