Изображение
Анимированные кнопки с эффектом блеска при наведении мыши.
Наши кнопки полностью сделаны на 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); }
}
Комментарии: 4

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

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

Изображение

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

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; - добиться нужного размера для шрифта.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin писал(а): <a href="#" class="button green"><div class="light"></div>Кнопка</a>
А куда это вставлять надо? :oops:
  • 0

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

А где вы хотите увидеть такую кнопку, туда и вставляйте:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!