Question

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 outline. 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
 );
}

Answer 1

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)
}