Кнопка для сайта с дополнительной информацией


Кнопка для сайта с дополнительной информацией

Кнопка для сайта с дополнительной информацией

Все мы знаем, что кнопки на сайте очень важны, они задают не только общий стиль дизайна но и подчеркивают его уникальность.увеличение груди отзывы пациентов, Каждый дизайнер стараться создать нечто уникальное, чтобы выделить стиль своего ресурса и сделать его более практичным. В данном уроке мы хотим рассмотреть кнопку с дополнительной информацией, которая поможет проинформировать пользователя о его дальнейших, возможных действиях. В примере мы будем использовать кнопку загрузки, с дополнительной информацией и возможностью выбора функций.

ДЕМО | ИСХОДНИК

 

Чтобы активировать действие, нам необходимо нажать на кнопку, в результате чего кнопка трансформируется в окно, в котором можно продолжить действие. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо создать простую разметку, для этого у нас последовательность классов, мы устанавливаем шапку с классом отображения стандартной кнопки, а затем у нас будет очередность выбора с помощью радиокнопок.

<div>
<header>Загрузить<i class="fa fa-angle-down"></i></header>
<ul>
<li><label><input type="radio" name="dl" checked>Для дома (бесплатно)</label></li>
<li><label><input type="radio" name="dl">1 лицензия (1 гривна)</label></li>
<li><label><input type="radio" name="dl">10 лицензий (10 гривен)</label></li>
</ul>
<section>
<button><i class="fa fa-cloud-download"></i><br>В Облако</button>
<button><i class="fa fa-download"></i><br>Скачать</button>
</section>
</div>

В конце мы предлагаем выбрать какое действие совершить, сохранить в облако или загрузить. Это позволит усовершенствовать загрузку, так как облачные хранилища стали весьма популярны.

Кнопка-для-сайта-с-дополнительной-информацией1

Шаг 2. CSS

Теперь нам необходимо стилизовать нашу кнопку, для этого мы применим несколько простых классов. Сперва мы стилизуем общие параметры, затем саму кнопку.

div {
width:300px;
display:block;
margin:0 auto;
border-radius:4px;
background:#eee;
height:34px;
overflow:hidden;
position:relative;
top:30%;
transform:translateY(-30%);
font-weight:200;
font-size:15px;
line-height:20px;
}
.touch {
height:auto;
overflow:auto
}
header {
background:#2098F6;
padding:8px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#fff;
background-clip:padding-box;
display:block;
cursor:pointer;
position:relative
}
header i {
position:absolute;
right:15px
}
ul {
color:#fff;
list-style-type:none;
margin:0;
padding:8px;
font-size:0
}
li {
margin:12px 0;
color:#222;
font-size:13px
}
section {
display:table;
table-layout:auto;
width:100%
}
input {
margin-right:8px
}
button {
border:0;
margin:0;
padding:10px;
display:table-cell;
width:50%;
background:rgba(0,0,0,0.5);
transition:background .4s ease;
color:#fff;
cursor:pointer
}
button:first-child {
border-right:1px solid rgba(255,255,255,0.5)
}
button:hover {
background:#2098F6
}
button .fa {
font-size:1.2rem
}

 

Для кнопки и окна нам необходимо установить два варианта отображения, неактивного и активного формата, что позволит сделать кнопку более живой.

Шаг 3. JS

Последним действием будет вызов функции при нажатии на кнопку, его используем для уведомления о активном действии, чтобы отобразить больше информации после нажатия:

$("button").click(function() {
alert("Boom");
});
$("header").click(function() {
$("div").toggleClass("touch")
});

 

В результате мы получаем достаточно удобную в использовании кнопку, которая поможет расширить стандартные возможности при загрузки.

Вот и все. Готово!

Источник: rudebox.org.ua

Previous Эффект для картинок на сайте на чистом CSS
Next Настройка эффектов слайдера и карусели в Opencart 1.5.x

Suggested Posts

Подборка php библиотек

Как сделать аккордеон на CSS3

JS для начинающих. Урок 1.18: Использование регулярных выражений

Модуль Действующие акции

СЕО для начинающих, основы для чайников – урок №2

Плагин Jrating