Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 03:31
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 4
Гостей: 3
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Анимационная кнопка-спойлер

Анимационная кнопка-спойлер Кнопка, Анимация
Здравствуйте. Всегда хотелось создать такой приятный и нужны элемент сайта, как кнопка. И вот у меня выдалась свободная минутка, как раз для этого.
В неактивном (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;
}


Между тегами <head> </head>:
Это придает плавность появлению контента после нажатия.
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 и В@дим.
Автор\Источник: Веб-Герой.рф

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2438 | Комментарии: 8 | Рейтинг: 4.4/7 | |Категория: Скрипты Разное | Добавил: Веб-Герой | Дата: 15.08.2012 | Скачали: 0 | Теги: кнопка, анимация
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 8
8 Kontroler   Дата: 17.11.2012  Время: 03:10   [№ 14039]
Где взять bgspoiler.gif и bgspoiler.png ? Автор обнови пожалуйста ссылки в коде CSS.

6 MDHous   Дата: 16.08.2012  Время: 16:56   [№ 13580]
Давно не видел таких интересных работ.
Продолжай в томже духе!

-1   Спам
7 Веб-Герой   Дата: 16.08.2012  Время: 17:17   1 [№ 13581]
Спасибо! Так и будет.

4 BEP   Дата: 16.08.2012  Время: 11:40   [№ 13578]
Очень красиво и очень удобно)Давненько не видел достойных работ молодец!

-1   Спам
5 Веб-Герой   Дата: 16.08.2012  Время: 11:49   1 [№ 13579]
Благодарю! Буду стараться в таком же направление.

1 Веб-Герой   Дата: 15.08.2012  Время: 23:39   [№ 13572]
Исправьте источник на веб-герой.рф
Кажется, я его добавлял..

2 В@дим   Дата: 16.08.2012  Время: 00:15   1 [№ 13573]
отличные дизайнерские решения как всегда) скоро закажу дизайн)

-1   Спам
3 Веб-Герой   Дата: 16.08.2012  Время: 10:51   2 [№ 13576]
Благодарю, мне очень приятно!


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru