Любителям минимализма посвящается данная статья. Задумался оформить кнопку, чтоб внешне она напоминала именно кнопку, а именно была немного выпуклой и отбрасывала тень. Естественно, что на самом деле она будет плоской, но используя 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;} |
При желании на ссылку можно задать легкий градиент.
Еще можно добавить border-radius для закругления и text-shadow для тени. Кстати с тенью текст получается более приятен глазу. Некий эффект блюр =)
Можно сделать флеш-анимацию этих кнопок, тогда вообще будет много визга, но здесь было описано, как добиться этого без ксс3.