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

 

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

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

Шаг 3. JS

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

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

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

Читайте также: