Здравствуйте. Всегда хотелось создать такой приятный и нужны элемент сайта, как кнопка. И вот у меня выдалась свободная минутка, как раз для этого.
В неактивном (
link) состояние она выглядит как 3D.
При наведение (
hover) появляется анимация в виде прокрутки картинки.
При нажатие (
active) чуть ниже плавно выходит текст и сама кнопка увеличивается.
Начнем установку. В
CSS.
Code
Button {
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
font-family: tahoma, cursive;text-algn:center;
color: #000;font-size: 15px;text-shadow: 1px 1px 1px #000; font-weight: bold;
padding: 8px 14px 10px;
background:url(http://www.immortal-squad.ru/PA3HOE/bgspoiler.png) repeat #EFDA9D;
border: none;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-decoration: none;
}
Button:hover {background:url(http://www.immortal-squad.ru/PA3HOE/bgspoiler.gif) repeat #ffe9a8; color:#000;text-shadow:0 0 5px #000;-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-o-transform: scale(1.02); background-color: #ffe9a8; color:#000;text-shadow:0 0 5px #000;-webkit-transform: scale(1.00);
-moz-transform: scale(1.00);
-o-transform: scale(1.00); box-shadow: inset 0 0 15px #000, 0 0 8px #000;
}
.reservations .button {
padding: 4px 47px 9px;
}
Button:active {box-shadow: inset 0 0 25px #000;
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
position: relative;
}
Button:active:after {
content: "";
width: 100%;
height: 3px;
position: absolute;
bottom: -1px;
left: 0;
}
Это придает плавность появлению контента после нажатия.
Code
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
И последнее, на страницу, где хотим видеть кнопочку:
Code
<button>Открыть спойлер</button><p style="display: none">Текст под спойлером</p><script>$("button").click(function () {$("p").toggle('normal');});</script>
На этом все, если возникнут вопросы, то Вы знаете где найти Героя ;)
P.s. за некоторые подсказки в создание скрипта благодарю WinDiZ и В@дим.
Меню сайта
Меню сайта
Где взять bgspoiler.gif и bgspoiler.png ? Автор обнови пожалуйста ссылки в коде CSS.
