« Раздвигающаяся кнопка скачать на чистом CSS для uCoz »
Представляем вашему внимаю неплохую раздвигающуюся кнопку Скачать, с использованием стилей CSS и кода HTML для сайтов системы uCoz. Кнопка будет раскрываться при наведении курсора, и вы можете добавлять любые заголовки, которые вам нравятся, в расширяющуюся часть, но в моем примере я поставил код размера архива. Вы также можете изменить скорость перехода в секунду, хотите ли вы чтоб кнопка расширялась быстрее или медленнее. Так же в стилях CSS вы легко сможете изменить цветовую гамму кнопки под свой дизайн сайта.
P.S. Код на демонстративной странице немного отличается от того кода который стоит ниже!
Установка:
1. Заходим в ПУ - Управление дизайном - Каталог файлов - Страница материала и комментариев к нему и ставим код, туда где хотим его видеть:
<div class="u5_button"><a href="$FILE_URL$">Скачать</a></div>
<div class="u5_capt"><div class="capt_text">Размер: $FILE_SIZE$</div></div>
<div class="u5_end"></div>
</div>
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
#ufive_down {
font-family: 'Cuprum';
width:150px;
display:block;
margin:0px auto 0px auto;
}
.u5_button {
height: 30px;
display:block;
transition:.5s all ease;
background: #f3be81;
width:150px;
position:relative;
padding: 3px 0px 0px 0px;
border:1px solid #c78840;
border-bottom-left-radius:5px;
border-top-left-radius:5px;
color:#393939;
text-align:center;
text-transform:uppercase;
font-weight: bold;
font-size: 16px;
}
.u5_button a {
text-decoration: none;
color:#393939;
}
#ufive_down .u5_capt {
background-color: #eee;
margin-top: -24px;
width: 120px;
margin-left: 29px;
z-index: -9;
border: 1px solid #ccc;
position: unset;
transition: 2s all ease-in-out;
height: 20px;
}
.capt_text {
text-align:center;
color:#393939;
font-size: 14px;
}
#ufive_down .u5_end {
background-color: #f3be81;
cursor: pointer;
width: 20px;
border-top: 1px solid #c78840;
border-right: 1px solid #c78840;
border-bottom: 1px solid #c78840;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
height: 30px;
position: unset;
margin-left: 148px;
margin-top: -26px;
transition: 2s all ease-in-out;
}
#ufive_down:hover .u5_capt {
margin-left:150px;
}
#ufive_down:hover .u5_button {
background-color:#f3be81;
}
#ufive_down:hover .u5_end {
margin-left:260px;
border-left:1px solid #c78840;
background-color:#f3be81;
}
/* uFive.Ru */
Готова!
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |