Стиль кнопки завантаження

Напевно ви бачили такі кнопки, на яких відразу видно індикатор завантаження. Тобто не створюється якийсь окрема смуга завантаження, а все стан видно прямо на цій кнопці. Такий ефект можна побачити на фотохостингу, де на кнопці видно стан завантаження вашого зображення. У нашій сьогоднішній статті я покажу що такий ефект зробити зовсім нескладно. Для цього нам буде потрібна краплина JS і властивості, які з`явилися тільки в CSS3. У статті є демо з прикладами, де всього 18 різноманітних ефектів на будь-який смак. Вам лише потрібно вибрати потрібний і знайти його код в CSS (в файлі стилів все підписано).

Стиль кнопки завантаження

18 незвичайних ефектів оформлення кнопки завантаження:

Подивитися прімерСкачать

Візьмемо звичайну кнопку на HTML:

1	lt;button class="Progress-button" data-style="Rotate-angle-bottom" data-perspective data-horizontalgt; Кнопкаlt;/buttongt;

І додамо між тегами додаткові теги:

Відео: Время и Стекло - На Стилі

12345678

lt;button class="Progress-button" data-style="Rotate-angle-bottom" data-perspective data-horizontalgt;lt;span class="Progress-wrap"gt;lt;span class="Content"gt; Кнопкаlt;/spangt;lt;span class="Progress"gt;lt;span class="Progress-inner"gt; lt;/spangt;lt;/spangt;lt;/spangt;lt;/buttongt;

Відео: LG Nexus 5 Boot Loop Fix - Power Button Repair -

Якщо ж вам не потрібні всякі 3D трансформації, тоді можна прибрати атрибут data-perspective. Код в цьому випадку буде виглядати так:

lt;button class="Progress-button" data-style="Fill" data-horizontalgt;lt;span class="Content"gt; Кнопкаlt;/spangt;lt;span class="Progress"gt;lt;span class="Progress-inner"gt; lt;/spangt;lt;/spangt;lt;/buttongt;

Ось основні ефекти для всіх кнопок:

Відео: HOW TO STYLE: Over The Knee Boots + LOOK BOOK

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100

.progress-button {position: relative-display: inline-block-padding: 0 60px-outline: none-border: none-background: # 1d9650-color: #fff-text-transform: uppercase-letter-spacing: 1px-font-size: 1em-line-height: 4-}.progress-button[disabled],.progress-button[disabled].state-loading {cursor: default-}.progress-button .content {position: relative-display: block-}.progress-button .content:: before,.progress-button .content:: after {position: absolute-right: 20px-color: # 0e7138-font-family: "Icomoon"-opacity: 0-transition: opacity 0.3s 0.3s-}.progress-button .content:: before {content: " e600"- / * Іконка в вигляді пташки про успішну завантаженні * /}.progress-button .content:: after {content: " e601"- / * Іконка помилки * /}.progress-button.state-success .content:: before,.progress-button.state-error .content:: after {opacity: 1-}.notransition {transition: none !important-}.progress-button .progress {background: # 148544-}.progress-button .progress-inner {position: absolute-left: 0-background: # 0e7138-}.progress-button[data-horizontal] .progress-inner {top: 0-width: 0-height: 100%-transition: width 0.3s, opacity 0.3s-}.progress-button[data-vertical] .progress-inner {bottom: 0-width: 100%-height: 0-transition: height 0.3s, opacity 0.3s-}/ * Необхідні стилі для кнопок з 3D перспективою * /.progress-button[data-perspective] {position: relative-display: inline-block-padding: 0-background: transparent-perspective: 900px-}.progress-button[data-perspective] .content {padding: 0 60px-background: # 1d9650-}.progress-button[data-perspective] .progress-wrap {display: block-transition: transform 0.2s-transform-style: preserve-3d-}.progress-button[data-perspective] .content,.progress-button[data-perspective] .progress {outline: 1px solid rgba(0,0,0,0)-}

А вже для кожного окремого кнопки стилі розрізняються.

Ми використовували псевдо-елементи :: before і :: after для того, щоб задати іконки про успішну завантаженні і про помилку.

висновок

Все що потрібно для Щоб використовувати вподобану кнопку у себе на сайті, так це знайти її CSS код у файлі стилів (для цього скачайте архів з прикладом) і потім знайдіть HTML код цієї кнопки. Кнопки дійсно дуже незвичайні і цікаві. Сподіваюся вам сподобаються # 128578; .