Membuat Progress Button
Harap perhatikan bahwa kami akan menggunakan transisi pada elemen semu yang masih belum didukung di beberapa browser (misalnya Safari dan Safari Seluler).
Perhatikan juga bahwa kita memerlukan gaya transform: mempertahankan dukungan 3-1 untuk gaya 3D, yang tidak didukung IE10 maupun IE11.
Dengan naskah yang telah kami buat untuk menampilkan gaya tombol, kami mengambil markup tombol sederhana
dan mengubahnya menjadi struktur berikut:
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
Jika kita tidak mengatur atribut data-perspektif, maka kita akan membuat struktur ini:<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>
<span class="progress-wrap">
<span class="content">Submit</span>
<span class="progress">
<span class="progress-inner"></span>
</span>
</span>
</button>
Jika kita tidak mengatur atribut data-perspektif, maka kita akan membuat struktur ini:<button class="progress-button" data-style="fill" data-horizontal>
<span class="content">Submit</span>
<span class="progress">
<span class="progress-inner"></span>
</span>
</button>
Kami juga menunjukkan jika kita memiliki gaya yang membutuhkan pengisian batuan horizontal atau vertikal. Ini akan digunakan dalam CSS kita untuk menentukan gaya yang terkait.Gaya berikut adalah gaya umum dan umum untuk semua tombol (perhatikan bahwa gaya perspektif hanya diperlukan untuk tombol dengan transformasi 3D):
*, *:after, *::before { box-sizing: border-box; }
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
}
.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"; /* Checkmark for success */
}
.progress-button .content::after {
content: "\e601"; /* Cross for error */
}
.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;
}
/* Necessary styles for buttons with 3D transforms */
.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); /* Smoothen jagged edges in FF */
}
Kami menggunakan pseudo-elements :: before and :: after untuk ikon sukses atau error yang kita luntur begitu pemuatan selesai. Rentang dengan kemajuan kelas digunakan sebagai pembungkus utama untuk progress bar itu sendiri yang merupakan rentang dengan kemajuan kelas - batin. Terkadang kita menggunakan progress span dengan warna background, sementara waktu lain kita hanya akan gaya span anak. Kami juga akan menyediakan beberapa gaya umum untuk kasus vertikal dan horizontal.Perhatikan bahwa untuk contoh 3D, kita akan menggunakan tombol sebagai "shell" yang akan berfungsi untuk menambahkan nilai perspektif. Rentang isi akan berisi gaya tombol seperti warna latar belakang dan padding, dan semuanya akan terbungkus dalam rentang dengan progress-wrap kelas yang akan menjadi elemen yang kita ubah.
Contoh gaya tombol individual adalah sebagai berikut:
/* Rotate bottom 3d */
/* ====================== */
.progress-button[data-style="rotate-angle-bottom"] .progress {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20px;
box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
transform: rotateX(-90deg);
transform-origin: 50% 0%;
}
.progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap {
transform: rotateX(45deg);
}
Tombolnya akan memiliki salah satu dari tiga negara bagian (atau tidak sama sekali): state-loading, state-success and state-error.Untuk browser yang tidak mendukung properti yang diperlukan, kami akan menyediakan default fallback dari style pertama (fill horizontal).
Ikon oleh IcoMoon dan font ikon dibuat dengan aplikasi IcoMoon.
Password: www.duniadesain.net
Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)Kami harap Anda menemukan gaya tombol ini memberi inspirasi dan berguna!
Source: Tympanus
Comments
Post a Comment