Question

This is the button im looking to make with CSS

_{(source: gyazo.com)}

ignore the grey background

I’ve tried cropping the center and adding border top, left, right but still looks weird.
Any ideas on how to create it in only CSS?

It has a white drop shadow, live preview: http://justxp.plutohost.net/themetheory/portfolio.html

Is that possible?

Thank you.

Answer 1

Came up with smth like this. Experiment with colors and fonts to get what you need

a {
  display:block;
  width:200px;
  height:40px;
  background:#5a81ff;
  color:#fff;
  font-size:1.5em;
  text-align:center;
  text-decoration:none;
  border:1px solid #656565;
  border-top-color:#cacaca;
  line-height:40px;    

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
  -moz-box-shadow:    0px 2px 0px rgba(176, 176, 176, 1);
  box-shadow:         0px 2px 0px rgba(176, 176, 176, 1);
}​

p.s. Working expm – http://jsfiddle.net/6zhDt/

p.p.s. If you want to know more – http://vimeo.com/31719130 Brilliant Lea Verou talks about multiple borders with shadows starting from about tenth minute.