DEMETR Создание сайтов в Казани

Опубликовано

Кнопки на css, без изображений

Любителям минимализма посвящается данная статья.  Задумался оформить кнопку, чтоб внешне она напоминала именно кнопку, а именно была немного выпуклой и отбрасывала тень. Естественно, что на самом деле она будет плоской, но используя 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;}

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

Кнопки на css, без изображений: 2 комментария

  • GlooK — 16.01.2011 в 01:29 #

    Еще можно добавить border-radius для закругления и text-shadow для тени. Кстати с тенью текст получается более приятен глазу. Некий эффект блюр =)

    [Ответить]

  • Demetr — 17.01.2011 в 14:00 #

    Можно сделать флеш-анимацию этих кнопок, тогда вообще будет много визга, но здесь было описано, как добиться этого без ксс3.

    [Ответить]