Любителям минимализма посвящается данная статья.  Задумался оформить кнопку, чтоб внешне она напоминала именно кнопку, а именно была немного выпуклой и отбрасывала тень. Естественно, что на самом деле она будет плоской, но используя CSS можно добиться того, что она будет якобы объемной. Конечно всего этого можно добиться и используя CSS3, но его пока понимают не все браузеры, а нам надо, чтобы наши труды увидели все.

Приступаем. Пишем хтмл:

<a href="#"><span class="f"><span class="s">кнопка</span></span></a>

И стили

a.btn, a.btn:visited{border-color:#F6F8FA #F6F8FA;
border-right:1px solid #F6F8FA;
border-style:none solid solid;
border-width:medium 1px 1px;
text-align:center;display:block;float:left;}
 
a.btn span.f{display:block;border-color:#EBF0F4;
border-width:1px;}
 
a.btn span.s{border-color:#DAE1E8 #DAE1E8 #c7cdd4;
border-style:solid;border-width:1px;
display:block; padding:5px 3px;}

При желании на ссылку можно задать легкий градиент.