Очень эстетичная раздвижная кнопка загрузки для веб-страницы, созданная с использованием CSS3 и оснащенная выезжающими панелями, содержащими дополнительную информацию.
Установка:
Там где хотите видеть кнопку этот код:
<div class="button">
<a href="#">Скачать</a>
<p class="top">нажмите чтобы скачать</p>
<p class="bottom">12MB .zip</p>
</div>
Это в CSS:
.button {
width: 200px;
margin: 150px auto;
}
.button a {
display: block;
height: 50px;
width: 200px;
/*ТИП*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*ГРАДИЕНТ*/
background: #299a0b; /* Old browsers */
background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* IE10+ */
background: linear-gradient(top, #299a0b 0%,#299a0b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}
.button a, p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*ТИП*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*ПОЛОЖЕНИЕ*/
position: absolute;
z-index: -1;
/*ПЕРЕХОД*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/*HOVER*/
.button:hover .bottom {
margin: -10px 0 0 10px;
}
.button:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button:active .bottom {
margin: -20px 0 0 10px;
}
.button:active .top {
margin: -70px 0 0 10px;
}
Приятного использования!
Раздел: Универсальные cкрипты
Категория: Различные
Кодировка: utf-8
Автор: Неизвестен
Опубликовал: Дмитрий
Подождите, сейчас файл будет подготовлен, через
секунд Вы получите ссылку на скачивание,
а сейчас может Зарегистрируемся? это быстро!
а сейчас может Зарегистрируемся? это быстро!
Навигация
Список доступных категорий сайта.
Web
Графика и Дизайн
Универсальные скрипты
Шаблоны uCoz и uCit
ㅤ uCoz и uCit Скрипты 28
ㅤ uCoz и uCit улучшения 14
Шаблоны DLE
ㅤ DLE Модули 27
ㅤ DLE Хаки/плагины 35
Прочие CMS шаблоны 9
Онлайн сервисы
Различная графика 104
Страница 404 15
Страница тех. работ 4
Онлайн Аниме от GiG-LiFe
Сериалы и Фильмы от GiG-LiFe
Магазин от GiG-LiFe
Основной сайт GiG-LiFe
Реклама
ТОП 7 Недели Портала
Самое просматриваемое за неделю
1 817
S.T.A.L.K.E.R. 2 — UETools: меню отладки, консоль разработчика | UETools: debugging menu, developer console
Читы и сохранения
525
S.T.A.L.K.E.R. 2 — Увеличенный вес рюкзака + увеличенная выносливость | Adjustable Carry Weight
Читы и сохранения
363
S.T.A.L.K.E.R. 2: Heart of Chornobyl - Ultimate Edition
Action; RPG; Приключения
142
S.T.A.L.K.E.R. 2 — Отключение компиляции шейдеров | No Shader Warmup
Геймплей и изменения
140
Орден Бытия | The Genesis Order
Для взрослых
125
S.T.A.L.K.E.R. 2 — Выбираем подходящую концовку | Choosing a suitable ending
Статьи
72
S.T.A.L.K.E.R. 2 — Квестовые предметы без веса | Quest item weight to 0
Геймплей и изменения
Copyright © 2023 | Проект GiG-LiFe.ru
Материалы на этом сайте взяты из общедоступных источников и могут быть удалены по просьбе авторов, при наличии доказательства авторства.
Materials on this site are taken from public sources and may be deleted at the request of their authors when there is evidence of authorship.