Анимированные кнопки с бликом на CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Анимированные кнопки с бликом на CSS3

CabinetAdmin 06 мар 2013, 19:32 Сообщение



Анимированные кнопки с эффектом блеска при наведении мыши.
Наши кнопки полностью сделаны на CSS3, а это опять же означает, что правильное отображение будет только в современных браузерах.

Структура кнопок очень простая:

Код: Выделить всё

<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. Второй класс отвечает за цветовое оформление наших кнопок.
<div class="light"></div> - который расположен внутри тега a, отвечает за блеск.

CSS.
Общие стили для всех кнопок:

Код: Выделить всё

.button{ height: 2em; padding: 15px 50px; margin: 20px 40px; cursor: pointer; display: inline-block; color: #FFF; font-size: 1em; border: 1px solid #eee; background: #eee; border-radius: 4px; line-height: 2em; border: 1px solid #aaa; text-decoration: none; -webkit-transition: all 0.3s linear; -khtml-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .button:hover{ -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; } .button:active { -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; text-shadow: 1px 1px 1px #eee; }


Стили для всех вариантов фона кнопок:
Развернуть Зелёный фон

Развернуть Красный фон

Развернуть Жёлтый фон

Развернуть Серый фон

Развернуть Чёрный фон

Развернуть Коричневый фон

Развернуть Голубой фон

Развернуть Темно-красный фон

Развернуть Фиолетовый фон


Анимация блеска:

Код: Выделить всё

.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; } .button:hover .light{ left: 45px; padding: 1px 5px; -webkit-animation-name: shine; -webkit-animation-duration: 0.6s; -webkit-animation-timing-function: linear; -khtml-animation-name: shine; -khtml-animation-duration: 0.6s; -khtml-animation-timing-function: linear; -moz-animation-name: shine; -moz-animation-duration: 0.6s; -moz-animation-timing-function: linear; -o-animation-name: shine; -o-animation-duration: 0.6s; -o-animation-timing-function: linear; -webkit-animation-name: shine; -webkit-animation-duration: 0.6s; -webkit-animation-timing-function: linear; } @-webkit-keyframes shine { 0% { top: -15px; left: -48px; } 10% { top: -5px; } 20% { top: 5px; } 30% { top: 15px; } 40% { top: 25px; } 50% { top: 35px; } 60% { top: 25px; } 70% { top: 15px; } 80% { top: 5px; } 90% { top: -5px; } 100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); } } @-khtml-keyframes shine { 0% { top: -15px; left: -48px; } 10% { top: -5px; } 20% { top: 5px; } 30% { top: 15px; } 40% { top: 25px; } 50% { top: 35px; } 60% { top: 25px; } 70% { top: 15px; } 80% { top: 5px; } 90% { top: -5px; } 100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); } } @-moz-keyframes shine { 0% { top: -15px; left: -48px; } 10% { top: -5px; } 20% { top: 5px; } 30% { top: 15px; } 40% { top: 25px; } 50% { top: 35px; } 60% { top: 25px; } 70% { top: 15px; } 80% { top: 5px; } 90% { top: -5px; } 100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); } } @-o-keyframes shine { 0% { top: -15px; left: -48px; } 10% { top: -5px; } 20% { top: 5px; } 30% { top: 15px; } 40% { top: 25px; } 50% { top: 35px; } 60% { top: 25px; } 70% { top: 15px; } 80% { top: 5px; } 90% { top: -5px; } 100% { top:-15px; left:45px; -o-transform: rotate(-360deg); } } @-keyframes shine { 0% { top: -15px; left: -48px; } 10% { top: -5px; } 20% { top: 5px; } 30% { top: 15px; } 40% { top: 25px; } 50% { top: 35px; } 60% { top: 25px; } 70% { top: 15px; } 80% { top: 5px; } 90% { top: -5px; } 100% { top:-15px; left:45px; transform: rotate(-360deg); } }


Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Анимированные кнопки с бликом на CSS3

eska 06 мар 2013, 22:27 Сообщение

Уважаемый CabinetAdmin, а можно ли поставить эту кнопку с надписью "Зарегистрироваться" в правую, верхнюю часть моего форума?
http://gaz-autoclub.ru



Только вот с цветом не как не могу определиться...

Аватара пользователя
CabinetAdmin

Re: Анимированные кнопки с бликом на CSS3

CabinetAdmin 07 мар 2013, 13:51 Сообщение

eska
Ну чего ж нельзя-то? У вас даже место под неё уже есть в overall_header.html:

Код: Выделить всё

<!-- you can place 468x60 banner here -->


В стиле:

Код: Выделить всё

.button{ height: 2em; padding: 15px 50px; margin: 20px 40px;


Меняя padding: 15px 50px; и margin: 20px 40px; можно добиться нужного размера и расположения относительно границ. Там же, изменяя font-size: 1em; - добиться нужного размера для шрифта.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Иринка

Анимированные кнопки с бликом на CSS3

Иринка 01 фев 2019, 10:56 Сообщение

CabinetAdmin писал(а):Источник цитаты <a href="#" class="button green"><div class="light"></div>Кнопка</a>

А куда это вставлять надо? :oops:

Аватара пользователя
CabinetAdmin

Анимированные кнопки с бликом на CSS3

CabinetAdmin 01 фев 2019, 15:54 Сообщение

А где вы хотите увидеть такую кнопку, туда и вставляйте:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость