КНОПКИ CSS3 (6 ЦВЕТОВ)


КНОПКИ CSS3 (6 ЦВЕТОВ)


Ещё вариант кнопочек с различными эффектами при наведении, и нажатии реализованных на CSS3.

HTML разметка
На базе примера построения Синих кнопочек:
<a href="#none" class="button small blue" title="Button">Кнопка</a>
<a href="#none" class="button normal blue" title="Button">Кнопка</a>
<a href="#none" class="button medium blue" title="Button">Кнопка</a>
<a href="#none" class="button big blue" title="Button">Кнопка</a>
<a href="#none" class="button megabig blue" title="Button">Кнопка</a>


CSS
Глобальные стили:
.button {
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
}


Размеры кнопок:
.small, .normal, .medium, .big, .megabig {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    padding: 5px 10px;
}
 
.small {
    font-size: 11px;
}
 
.normal {
    font-size: 14px;
}
 
.medium {
    font-size: 18px;
}
 
.big {
    font-size: 24px;
}
 
.megabig {
    font-size: 32px;
}


И конкретно для Синей кнопки:
В нормальном состоянии:
.blue {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52A8E8), to(#377AD0));
    background-image: -moz-linear-gradient(0% 100% 90deg, #377AD0, #52A8E8);
    background-color: #52A8E8;
    border: 1px solid #20559A;
}


При наведении курсора:
.blue:hover, .blue:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#54A1D8), to(#1967CA));
    background-image: -moz-linear-gradient(0% 100% 90deg, #1967CA, #54A1D8);
    background-color: #52A8E8;
    color: white;
}


И активное, нажатое состояние:
.blue:active {
    background: #2D7CD1;
    color: white;
}


Скачать исходник:
buttons_css3.rar


скрипт скрипт КНОПКИ CSS3 (6 ЦВЕТОВ)
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2515
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация