Создание 3D кнопок. Хорошо применима для кнопочки какого либо раздела или правила, что выдает ее яркость и красоту. В данном виде кнопок не участвует графика что делает загрузку страницы на много быстрей чем с графикой. Кнопки при помощи стиля css.3D кнопки создаются с помощью CSS стиля не большого и не сложного, с неким отступом для бордюра Для создания разных кнопок мы подойдем создаю к каждой отдельно с стилем в отдельности
Итак 1 вариант
Css стиль кнопки , вставляется в таблицу стилей и работает на всем сайте, настройки цветности и размеров указанны в записях подсказках:
Code
.button12{
background-color: #ff6600; /* Цвет фона */
border: 1px #ff6600 outset; /* Цвет бордюра */
padding: 0 2px; /* Отступ бордюра */
text-decoration: none; /* Запретить декорацию текста */
font: bold 10px Verdana; /* Размер шрифта и тип его */
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: #FFFFFF; /* Цвет текста при наведение */
}
background-color: #ff6600; /* Цвет фона */
border: 1px #ff6600 outset; /* Цвет бордюра */
padding: 0 2px; /* Отступ бордюра */
text-decoration: none; /* Запретить декорацию текста */
font: bold 10px Verdana; /* Размер шрифта и тип его */
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: #FFFFFF; /* Цвет текста при наведение */
}
Вывод стиля на кнопку ссылки производится при помощи класса class="button12" таким образом:
Code
<a href="http://Ucozua.ru/" class="button12">Ucozua.ru</a>
Второй вариант кнопки живой в стандарте 3D
Сss 3D стиль кнопки , вставляется в таблицу стилей и работает на всем сайте, настройки цветности и размеров указанны в записях:
Code
.button14:visited{
color: black; /* Цвет текста посещенный */
}
.button14:hover{
border-style: inset; /* Тип бордюра*/
color: black; /* Цвет текста при наведение */
background-color: #e3f48e; /* Цвет фона при наведение */
padding: 2px 3px 0 5px; /*Отступы бордюра кнопки*/
}
.button14:active{
color: black; /* Цвет текста активный */
}
.button14:hover{
background-color: #FF9900; /* Цвет фона при наведение */
}
color: black; /* Цвет текста посещенный */
}
.button14:hover{
border-style: inset; /* Тип бордюра*/
color: black; /* Цвет текста при наведение */
background-color: #e3f48e; /* Цвет фона при наведение */
padding: 2px 3px 0 5px; /*Отступы бордюра кнопки*/
}
.button14:active{
color: black; /* Цвет текста активный */
}
.button14:hover{
background-color: #FF9900; /* Цвет фона при наведение */
}
Вывод стиля на ссылку составления 3D кнопки:
Code
<a href="http://Ucozua.ru/" class="button14">Ucozua</a>
Все очень просто и работает во всех браузерах без проблем, так как стиль этот уже довольно долго используется на кнопках.
Теги:
Проверить тиц
Витрина ссылок
