Gaya Tiga Butang

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

Dalam gaya di atas, anda akan melihat font dan background-color perubahan dalam kedua -dua arah sepanjang tempoh penukaran. Ini adalah contoh yang sangat mudah. Untuk membina dari sini, anda boleh menggunakan warna jenama kegemaran anda sebagai inspirasi. Menggunakan BrandColors adalah cara terbaik untuk mencari warna jenis jenama ini. .2s

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

dan :hover. :active

hanya mengandungi satu baris kod untuk mengurangkan kelegapan. Ini adalah helah yang berguna untuk membuat butang kelihatan lebih ringan tanpa anda mencari warna yang baru, sebenarnya lebih ringan. :hover

bukan garis seragam yang kukuh, tetapi menggunakan border, border-bottom dan border-left untuk membuat kesan kedalaman 3D. border-right

. Apabila butang contoh kami menjadi :active, dua perkara berlaku. :active

1. Tukar dari 3px hingga 1px. Ini menyebabkan bayang -bayang di bawah butang menyusut dan menggerakkan seluruh objek butang ke bawah dengan beberapa piksel. Walaupun mudah, perubahan ini membantu pengguna merasakan bahawa mereka mengklik butang ke dalam halaman. border-bottom
perubahan warna. Warna latar belakang menjadi gelap, mensimulasikan pergerakan secara fizikal dari pengguna dan memasukkan halaman. Sekali lagi, perubahan halus ini mengingatkan pengguna bahawa mereka mengklik butang.

untuk membuat gerakan cetek. Perlu diingat bahawa beberapa butang UI rata tidak bergerak sama sekali, hanya mengambil kesempatan daripada perubahan warna. border-bottom

bahan adalah metafora
berani, grafik, tujuan
Sukan memberi makna

Nota: Contoh ini tidak termasuk tag kerana ia mengikuti tag lalai butang polimer, tetapi jika anda melaksanakan polimer dalam projek besar, ia patut meneroka penggunaan tag <button> dalam pelaksanaan anda Bukannya tag <button>. Kami akan meneroka ini dengan lebih terperinci dalam artikel masa depan. <a>

Butang ini menggunakan dua idea utama - box-shadow dan polimer.

Polimer adalah rangka komponen dan alat untuk membantu laman web reka bentuk. Jika anda sudah biasa dengan Bootstrap, polimer sangat serupa. Kesan riak yang kuat yang terdapat di atas boleh ditambah hanya dalam satu baris kod.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<paper-ripple fit></paper-ripple> adalah komponen polimer. Dengan mengimport polimer pada permulaan HTML, kita boleh mengakses kerangka popular dan komponen mereka. Ketahui lebih lanjut mengenai Laman Utama Projek Polimer.

Sekarang kita faham apa polimer dan di mana riak -riak berasal (bagaimana ia berfungsi adalah cerita lain), mari kita bincangkan CSS yang membantu melaksanakan prinsip reka bentuk bahan untuk membuat butang menonjol.

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

Butang ini menggunakan box-shadow untuk mencapai kebanyakan reka bentuk. Mari kita lihat bagaimana box-shadow perubahan dan memainkan sihirnya dengan mengeluarkan CSS yang tidak berubah:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

box-shadow digunakan untuk meletakkan bayangan nipis di sebelah kiri dan bawah setiap butang. Apabila diklik, bayang -bayang meluas dan menjadi kurang gelap. Tindakan ini mensimulasikan bayangan 3D butang melompat dari halaman ke pengguna. Tindakan ini adalah sebahagian daripada gaya reka bentuk bahan dan prinsip aplikasi praktikal mereka.

Butang reka bentuk bahan boleh dibuat dengan menggabungkan polimer dengan kesan box-shadow.

• bahan adalah metafora-dengan menggunakan box-shadow, kita boleh mensimulasikan bayang-bayang 3D yang muncul dalam objek dunia sebenar
• berani, grafik, sengaja - ini lebih realistik untuk butang biru dan hijau terang, dan butang ini benar -benar memuaskannya.
• Pergerakan Memberi Makna - Menggunakan Polimer dan Penukaran, kita boleh membuat banyak gerakan apabila pengguna mengklik butang. box-shadow

Kesimpulan

Soalan -soalan yang sering ditanya mengenai butang CSS moden

Bagaimana untuk membuat butang CSS yang mudah?

Membuat butang CSS mudah melibatkan menentukan kelas dalam fail CSS anda dan memohon kepada elemen butang dalam fail HTML. Sebagai contoh, anda boleh menentukan kelas .button dalam fail CSS yang mengandungi atribut seperti background-color, color, border, padding, text-align, text-decoration, display, cursor, .button, .button, dan

kepadanya. Ini akan gaya butang mengikut sifat yang ditakrifkan dalam kelas

:hover Bagaimana untuk menambah kesan hover ke butang CSS? :hover

untuk menambah kesan hover ke butang CSS. Kelas pseudo ini digunakan untuk memilih dan menetapkan gaya elemen apabila penunjuk pengguna melayang di atasnya. Sebagai contoh, apabila penunjuk pengguna melayang di atasnya, anda boleh menukar warna latar belakang dan warna teks butang dengan mendefinisikan sifat-sifat ini dalam kelas pseudo dari kelas butang.

Bagaimana untuk membuat butang CSS dengan ikon?

Butang CSS dengan ikon boleh dibuat dengan menggunakan fon ikon atau ikon SVG. Fon ikon seperti Font Awesome menyediakan pelbagai ikon yang mudah digabungkan dengan CSS. Untuk menggunakan fon ikon, anda perlu memasukkan fail CSS fon ikon dalam fail HTML, dan kemudian gunakan kelas yang sepadan ikon yang anda mahu gunakan. Sebaliknya, ikon SVG boleh dibenamkan terus ke dalam fail HTML dan digayakan menggunakan CSS.

Bagaimana untuk membuat butang CSS dengan kecerunan? linear-gradient() radial-gradient() butang CSS dengan kecerunan boleh dibuat menggunakan fungsi

. Fungsi -fungsi ini digunakan untuk menentukan kecerunan linear atau kecerunan radial. Kecerunan ditakrifkan oleh dua atau lebih titik warna berhenti warna yang merupakan warna di mana kecerunan ditukar. Titik berhenti warna ditakrifkan oleh warna dan kedudukan warna di sepanjang garis kecerunan.

Bagaimana untuk membuat butang CSS dengan sudut bulat? border-radius border-radius Butang CSS dengan sudut bulat boleh dibuat menggunakan atribut

boleh ditentukan dalam piksel atau peratusan. Nilai yang lebih tinggi akan mewujudkan sudut yang lebih bulat.

Bagaimana untuk membuat butang CSS dengan bayangan? box-shadow box-shadow Butang CSS dengan bayang -bayang boleh dibuat menggunakan atribut

mengambil pelbagai nilai, termasuk mengimbangi bayang -bayang, mengimbangi menegak, radius kabur, jejari lanjutan, dan warna.

Bagaimana untuk membuat butang CSS dengan peralihan? transition transition Butang CSS dengan peralihan boleh dibuat menggunakan atribut

Atas ialah kandungan terperinci Pengenalan kepada asas -asas butang CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!