Butang hantu dengan kesedaran arah dalam CSS

Anda mungkin pernah melihat butang hantu? Mereka dicirikan oleh latar belakang telus dan latar belakang dipenuhi dengan warna pepejal apabila tetikus melayang. Majalah Smashing mempunyai artikel mengenai topik ini. Artikel ini akan membina butang hantu, tetapi bahagian ini agak mudah. Menariknya dan rumit, kami akan mempunyai animasi mengisi butang hantu bermula pada hover tetikus.

Berikut adalah contoh butang hantu asas:

Dalam kebanyakan kes, peralihan warna latar belakang ke warna pepejal. Sesetengah reka bentuk akan mengisi butang dari kiri ke kanan, atas ke bawah, dan lain -lain untuk meningkatkan kesan visual. Sebagai contoh, isi dari kiri ke kanan:

Berikut adalah masalah pengalaman pengguna yang kecil. Sekiranya tetikus melayang di pinggir kawasan yang diisi, ia akan merasakan sesuatu yang salah. Pertimbangkan contoh ini, butang mengisi dari kiri, semasa anda melayang dari kanan.

Adalah lebih baik untuk mempunyai butang mengisi dari titik hover awal.

Jadi, bagaimana kita memberikan persepsi arah butang? Intuisi awal anda mungkin menggunakan JavaScript, tetapi kami boleh melakukannya dengan CSS dan beberapa tag tambahan.

Bagi mereka yang ingin melihat hasilnya dengan cepat, berikut adalah beberapa butang hantu yang dilaksanakan di CSS tulen!

Mari kita bina langkah demi langkah. Semua kod boleh didapati dalam koleksi Codepen ini.

Buat asas

Mari kita mulakan dengan asas -asas membuat butang hantu. Penandaan adalah mudah.

 <button>Boo!</button>

Pelaksanaan CSS kami akan menggunakan sifat adat CSS. Ini menjadikan penyelenggaraan lebih mudah dan juga memudahkan penyesuaian melalui sifat sebaris.

 butang {
  --borderwidth: 5;
  --BoxShadowDepth: 8;
  -buttoncolor: #f00;
  --FONTSIZE: 3;
  --HorizontalPadding: 16;
  --verticalpadding: 8;

  Latar Belakang: Telus;
  Sempadan: calc (var (-borderWidth) * 1px) var pepejal (-ButtonColor);
  box-shadow: calc (var (-boxshadowdepth) * 1px) calc (var (-boxshadowdepth) * 1px) 0 #888;
  Warna: var (-ButtonColor);
  kursor: penunjuk;
  saiz font: calc (var (-fontsize) * 1rem);
  Font-Weight: Bold;
  garis besar: telus;
  padding: calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  Peralihan: Box-shadow 0.15s mudah;
}

butang: hover {
  box-shadow: calc (var (-boxshadowdepth) / 2 * 1px) calc (var (-boxshadowdepth) / 2 * 1px) 0 #888;
}

butang: aktif {
  box-shadow: 0 0 0 #888;
}

Letakkan bersama dan kami mendapat:

sangat bagus! Kami mempunyai butang dan kesan hover, tetapi belum ada kesan mengisi. Seterusnya mari tambahkan kesan mengisi.

Tambah isi

Untuk melakukan ini, kami membuat beberapa elemen untuk memaparkan keadaan mengisi butang hantu. Caranya ialah menggunakan clip-path untuk menanam unsur-unsur ini dan menyembunyikannya. Kita boleh memaparkannya pada hover dengan menukar clip-path .

Mereka mesti diselaraskan dengan butang induk. Pembolehubah CSS kami akan sangat membantu di sini.

Pada mulanya, kita mungkin mempertimbangkan menggunakan unsur-unsur pseudo. Walau bagaimanapun, untuk setiap arah, bilangan elemen pseudo tidak mencukupi. Mereka juga mempengaruhi akses ... lebih lanjut mengenai yang kemudian.

Mari kita mulakan dengan menambah padding kiri-ke-kanan. Pertama, mari tambahkan satu<span></span> elemen. Harus<span></span> Elemen perlu mempunyai kandungan teks yang sama seperti butang.

<button>
  <span>Boo!</span>
  Boo!
</button>

Sekarang kita perlu<span></span> Unsur -unsur diselaraskan dengan butang. Pembolehubah CSS kami akan melakukan kebanyakan kerja.

 rentang butang {
  Latar Belakang: var (-ButtonColor);
  Sempadan: calc (var (-borderWidth) * 1px) var pepejal (-ButtonColor);
  bawah: calc (var (-borderWidth) * -1px);
  warna: var (-bg, #fafafa);
  kiri: calc (var (-borderWidth) * -1px);
  padding: calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  Kedudukan: Mutlak;
  kanan: calc (var (-borderWidth) * -1px);
  atas: calc (var (-borderWidth) * -1px);
}

Akhirnya, kami akan<span></span> Unsur ini dipotong di luar pandangan dan menambah peraturan untuk memaparkannya pada hover dengan mengemas kini tanaman. Menentukan peralihan akan menambah icing pada kek.

 rentang butang {
  --clip: inset (0 100% 0 0);
  -WebKit-klip-path: var (-klip);
  klip-laluan: var (-klip);
  Peralihan: Clip-Path 0.25s Ease, -WebKit-Clip-Path 0.25S Ease;
  / * ... gaya div yang tinggal */
}

butang: hover span {
  --clip: inset (0 0 0 0);
}

Tambah kesedaran arah

Jadi, bagaimana kita menambah kesedaran arah? Kami memerlukan empat elemen. Setiap elemen akan bertanggungjawab untuk mengesan titik kemasukan hover. Menggunakan clip-path , kita boleh membahagikan kawasan butang ke dalam empat bahagian.

Mari tambahkan empat ke butang<span></span> unsur -unsur dan kedudukan mereka untuk mengisi butang.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

rentang butang {
  Latar Belakang: Var (-BG);
  bawah: calc (var (-borderWidth) * -1px);
  -WebKit-klip-path: var (-klip);
  klip-laluan: var (-klip);
  kiri: calc (var (-borderWidth) * -1px);
  Kelegapan: 0.5;
  Kedudukan: Mutlak;
  kanan: calc (var (-borderWidth) * -1px);
  atas: calc (var (-borderWidth) * -1px);
  Z-indeks: 1;
}

Kami boleh mencari setiap elemen dan menetapkan tanaman dan warna menggunakan pembolehubah CSS.

 Butang rentang: nth-of-type (1) {
  --bg: #00F;
  --LIP: Polygon (0 0, 100% 0, 50% 50%, 50% 50%);
}
Butang rentang: nth-of-type (2) {
  --bg: #f00;
  --LIP: Polygon (100% 0, 100% 100%, 50% 50%);
}
Butang rentang: nth-of-type (3) {
  --BG: #008000;
  --LIP: Polygon (0 100%, 100%100%, 50%50%);
}
Butang rentang: nth-of-type (4) {
  --BG: #800080;
  --LIP: Polygon (0 0, 0 100%, 50%50%);
}

Sangat sejuk. Untuk menguji ini, mari kita ubah kelegapan semasa melayang.

 Butang rentang: nth-of-type (1): hover,
Butang rentang: nth-of-type (2): hover,
Butang rentang: nth-of-type (3): hover,
Butang rentang: nth-of-type (4): hover {
  Kelegapan: 1;
}

Oh, ada soalan di sini. Jika kita masuk dan berlegar di atas satu bahagian dan kemudian hover ke atas yang lain, arah pengisian akan berubah. Ini tidak kelihatan betul. Untuk menyelesaikan masalah ini, kita boleh menetapkan z-index dan clip-path pada hover supaya sebahagian ruang diisi.

 Butang rentang: nth-of-type (1): hover,
Butang rentang: nth-of-type (2): hover,
Butang rentang: nth-of-type (3): hover,
Butang rentang: nth-of-type (4): hover {
  --LIP: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
  Kelegapan: 1;
  Z-indeks: 2;
}

Menggabungkan bersama

Kami tahu bagaimana untuk membuat animasi mengisi, dan kami tahu bagaimana untuk mengesan arah. Bagaimana kita menggabungkan kedua -duanya? Gunakan kombo pada tahap yang sama!

Melakukan ini bermakna apabila kita melayang segmen, kita boleh memaparkan elemen pengisian tertentu.

Pertama, mari kita kemas kini tag.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

Sekarang, kita boleh mengemas kini CSS. Merujuk kepada padding kiri-ke kanan kami, kami boleh menggunakan semula gaya. Kami hanya perlu menetapkan clip-path khusus untuk setiap elemen. Saya mengendalikannya dalam susunan yang sama seperti beberapa nilai atribut. Unsur anak pertama adalah bahagian atas, yang kedua adalah hak, dan sebagainya.

 Butang B: Nth-of-Type (1) {
  --clip: inset (0 0 100% 0);
}
Button B: Nth-of-Type (2) {
  --clip: inset (0 0 0 100%);
}
Butang B: Nth-of-Type (3) {
  --clip: inset (100% 0 0 0);
}
Butang B: Nth-of-Type (4) {
  --clip: inset (0 100% 0 0);
}

Langkah terakhir ialah mengemas kini clip-path elemen yang berkaitan apabila melayang segmen pasangan.

 Butang rentang: nth-of-type (1): hover ~ b: nth-of-type (1),
Butang rentang: nth-of-type (2): hover ~ b: nth-of-type (2),
Butang rentang: nth-of-type (3): hover ~ b: nth-of-type (3),
Butang rentang: nth-of-type (4): hover ~ b: nth-of-type (4) {
  --clip: inset (0 0 0 0);
}

Baiklah! Kami mendapat butang hantu CSS tulen dengan kesedaran arah.

Kebolehcapaian

Dalam keadaan semasa, butang tidak boleh diakses.

Unsur -unsur tambahan ini tidak banyak membantu, kerana pembaca skrin mengulangi kandungan empat kali. Kita perlu menyembunyikan unsur -unsur ini dari pembaca skrin.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  Boo!
</button>

Tiada lagi kandungan pendua.

Itu sahaja!

Dengan hanya beberapa penandaan tambahan dan beberapa helah CSS, kita boleh membuat butang hantu dengan kesedaran arah. Menggunakan preprocessor atau menggabungkan komponen dalam aplikasi anda, anda tidak perlu menulis semua HTML.

Ini adalah demonstrasi menggunakan pembolehubah CSS inline untuk mengawal warna butang.

Output yang disemak semula ini mengekalkan imej asal dan menggunakan ungkapan yang lebih ringkas dan bervariasi sambil mengekalkan makna teras teks asal. Ia juga menangani isu aksesibiliti yang disebutkan dalam artikel asal.

Atas ialah kandungan terperinci Butang hantu dengan kesedaran arah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!