Уважаемый CabinetAdmin, а можно ли поставить эту кнопку с надписью "Зарегистрироваться" в правую, верхнюю часть моего форума?
http://gaz-autoclub.ru
Только вот с цветом не как не могу определиться...
Анимированные кнопки с эффектом блеска при наведении мыши.
Наши кнопки полностью сделаны на CSS3, а это опять же означает, что правильное отображение будет только в современных браузерах.
Структура кнопок очень простая:
Главное различие в кнопках, это второй класс идущий следом за
CSS.
Общие стили для всех кнопок:
Стили для всех вариантов фона кнопок:
Анимация блеска:
Наши кнопки полностью сделаны на 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
Ну чего ж нельзя-то? У вас даже место под неё уже есть в
В стиле:
Меняя
Ну чего ж нельзя-то? У вас даже место под неё уже есть в
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;
- добиться нужного размера для шрифта.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!