Создание
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; /* Цвет текста при наведение */
}
Вывод стиля на кнопку ссылки производится при помощи класса class="button12" таким образом
Code
<a href="http://ucozon.ru/" class="button12">UCOZON.RU</a>
css 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; /* Цвет фона при наведение */
}
Вывод стиля на ссылку составления 3D кнопки
Code
<a href="http://ucozon.ru/" class="button14">UCOZON</a>
Все очень просто и работает во всех браузерах без проблем, так как стиль этот уже довольно долго используется на кнопках.
Меню сайта
Меню сайта
