Bevel highlight with no additional markup

Do you see the thin bevel highlight on top? How do you do this in CSS with only one HTML tag? I'm guessing it has something to do with ou开发者_高级运维tline. This is what I have so far without the bevel:

<a class="callToAction">Click here</a>

.callToAction {
 border: 1px solid #000;
 -moz-border-radius: 0.4em;
 background: -moz-linear-gradient(
  top,
  #ccc,
  #999
 );
}

To create a bevel you must use a combo of the CSS3 radius and shadow attributes. To get the highlight when hovering over a button you must use the pseudo-selector :hover.

The Button Code from http://www.whitedogdesigngroup.com/blog/entry/a_better_button_with_css3/

callToAction {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 -2px #791c13;
  -moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
  -webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
  box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
}

callToAction:hover {
  margin-bottom: 1px;
  height: 29px;
  position: relative;
  top: 1px;
  color: #eee !important;

  -moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
  -webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
  box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
}

If you need further explanation...

Explanation of CSS3 borders: http://doctype.tv/borders

Explanation of CSS3 shadows: http://doctype.tv/css3

Just found out that you can specify a shadow to be an inset by inspecting the source of http://html5doctor.com/you-can-still-use-div/:

.inset {
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 
             0 0 2px rgba(255, 255, 255, 0.3) inset, 
             0 1px 2px rgba(0, 0, 0, 0.29)
}