В этом небольшой примере, мы с вами построим 3D кнопку, использую только CSS. Визуальный эффект создается благодаря двум небольшим фоновым изображениям, которые прописываются в css коде. За счет разницы градиентной заливки и получается эффект.
HTML код:
<a href="#" class="button"><span>Текст кнопки</span></a>
Думаю расписывать этот код не стоит :-)
CSS код:
a.button
{
float:left;
font-size:110%;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
}
a.button:hover
{
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999;
color:#333;
}
a.button span
{ background:#d4d0c8 url(images/jsimg/button_bg.gif) repeat-x;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777;
}
a.button:hover span
{
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(images/jsimg/button_over.gif) repeat-x;
cursor:pointer;
}
Результат:
Set as favorite
Закладка
Email This
Trackback(0)
TrackBack URI for this entryКомментарии (7)
Простенько и со вкусом:)
В принципе, да. Но есть один резонный вопрос: если нам нужна кнопка как элемент формы, то почему бы не использовать button? Но, если нам нужно именно ссылку оформить как кнопку, то неплохо. Однако, похожего эффекта можно достигнуть с одним фоновым изображением и без span внутри ссылки, если поиграть с свойством начертания для border.
,
Ноябрь 04, 2008
|
-
- +1
-
-
...
На самом деле, действительно, способов очень много, как достичь подобного эффекта. Я просто описал один из них. Просто, фоновое изображение создает эффект перетекания цвета, т.е. градиент. Чего нельзя сделать просто используя доступные цвета...
,
Ноябрь 04, 2008
|
-
- +1
-
-
Показать/скрыть форму отправки
