12 299 Скрипты / Buttons

CSS3 кнопки с бликом

CSS3 кнопки с бликом

CSS3 кнопки для сайта объединяющие в себе свойства box-shadow, border-radius и анимацию для создания эффекта блеска при наведении мышки. Снова замечу, что в старых браузерах должным образом этот эффект не будет.

HTML

Начнем с разметки наших кнопок:
<a href="#" class="button green"><div class="light"></div>Кнопка</a>
<a href="#" class="button red"><div class="light"></div>Кнопка</a>
<a href="#" class="button blue"><div class="light"></div>Кнопка</a>
<a href="#" class="button yellow"><div class="light"></div>Кнопка</a>
<a href="#" class="button grey"><div class="light"></div>Кнопка</a>
<a href="#" class="button black"><div class="light"></div>Кнопка</a>
<a href="#" class="button brown"><div class="light"></div>Кнопка</a>
<a href="#" class="button darkred"><div class="light"></div>Кнопка</a>
<a href="#" class="button purple"><div class="light"></div>Кнопка</a>
Все кнопки имеют класс button у анкора (тега a), что будет гарантировать нам одинаковое поведение у всех. Но чтобы можно было использовать разные цвета кнопок мы добавляем ещё один класс, характеризующий цвет.
Также, каждая из кнопок имеет ещё один DIV блок внутри анкора, который будет отвечать за блеск.

CSS

Данный класс писывает общие черты всех кнопок: отступы, размеры, границы, тени, анимацию и т.д.
:hover - свойства для кнопки при наведении на неё курсора.
:active - свойства для кнопки в нажатом состоянии.
Далее у нас стили всех используемых вариаций цветов для кнопок:
Стили отвечающие за анимацию блеска.
.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}

Для начала создадим DIV блок похожий на блеск света, для этого мы будем использовать CSS градиент фона - яркий в середине и постепенно затухающий на краях.
Теперь добавим анимацию блеска для DIV блока в состоянии наведения на него.
Установим ключевые кадры, то есть определим положение DIV блока с блеском в каждом из 10 кадров анимации. Это и создаст эффект переворачивающегося летящего блика на кнопке.
Скачать 1946Загрузок 2,18 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи