Pengenalan kepada asas -asas butang CSS moden

Reka bentuk butang laman web: Tiga Gaya dan Pelaksanaan CSS

Artikel ini telah dikemas kini pada 9 Julai 2016 dan telah menggantikan tag

dengan tag <a></a> untuk mematuhi amalan terbaik akses moden. Jika anda sedang mengusahakan butang, selalu berpegang pada tag <button></button>. <button></button> Butang

adalah salah satu komponen yang paling penting dari mana -mana laman web, dan mereka mempunyai banyak negeri dan fungsi yang berbeza, yang semuanya perlu dipadankan dengan betul dengan keputusan reka bentuk sebelumnya. Dalam artikel ini, kami akan memperkenalkan tiga konsep reka bentuk butang, bersama dengan kod dan alat CSS untuk membantu pemaju baru membuat butang mereka sendiri.

Sebelum menyelidiki pelbagai konsep reka bentuk butang, kita perlu mengkaji beberapa pengetahuan asas mengenai butang CSS. Jika anda tidak tahu komponen CSS mana yang akan berubah, tidak masuk akal untuk memahami perbezaan pemikiran antara UI yang diratakan dan reka bentuk bahan.

mari kita cepat semak asas butang CSS.

mata utama

Menggunakan
• tag adalah cara yang disyorkan untuk mengendalikan butang dalam amalan terbaik akses moden. <button></button>
Reka bentuk butang yang baik harus memastikan kebolehcapaian, butang harus mudah diakses oleh orang kurang upaya dan pengguna yang menggunakan pelayar yang lebih tua, dan harus mengandungi teks mudah supaya pengguna dapat memahami dengan segera tujuan butang tersebut.
• Tiga elemen asas utama
reka bentuk butang adalah warna, bayang-bayang, dan masa peralihan, yang boleh dikendalikan menggunakan kelas pseudo CSS seperti
• dan :hover. :active
Artikel ini menyediakan contoh tiga gaya butang: butang hitam dan putih sederhana, butang UI rata, dan butang reka bentuk bahan, masing -masing dengan kaedah reka bentuk tersendiri.
Untuk membuat reka bentuk butang anda sendiri, disarankan untuk menggunakan alat seperti penjana butang CSS3.

Asas butang CSS

Definisi butang yang baik berbeza dari laman web ke laman web, tetapi terdapat beberapa piawaian bukan teknikal:

1. Kebolehcapaian - Ini adalah perkara yang paling penting. Butang harus mudah diakses oleh orang kurang upaya dan pengguna menggunakan pelayar yang lebih tua. Keterbukaan rangkaian cantik, jangan memusnahkannya dengan CSS yang cuai.
2. Teks mudah - simpan teks di dalam butang pendek dan jelas. Pengguna harus dapat memahami dengan segera apa butang itu dan di mana ia akan mengambilnya.

Hampir semua butang yang anda lihat dalam talian menggunakan beberapa variasi perubahan warna, masa penukaran, dan sempadan dan perubahan bayangan. Ini boleh dieksploitasi menggunakan pelbagai kelas pseudo CSS. Kami akan memberi tumpuan kepada dua daripada mereka -

dan :hover. :active Pseudo-Class mentakrifkan bagaimana CSS harus berubah apabila tetikus melayang ke atas objek. :hover paling sering dilakukan di antara pengguna yang menekan butang tetikus dan melepaskan butang tetikus. :active

Paparan keseluruhan butang boleh diubah menggunakan kelas pseudo, tetapi ini bukan pendekatan mesra pengguna. Strategi yang baik untuk pemula adalah untuk membuat perubahan kecil atau mudah kepada elemen asas butang sambil mengekalkan butang yang biasa. Tiga elemen asas utama butang adalah warna, bayang -bayang, dan masa penukaran.

Unsur Asas 1 -Kolor

Ini adalah perubahan yang paling biasa. Kita boleh mengubah warna pelbagai atribut, sifat -sifat yang paling mudah adalah color, background-color dan border sifat. Sebelum kita melompat ke contoh, mari fokus terlebih dahulu pada cara memilih warna butang:

1. Gabungan warna - Gunakan warna pelengkap. Colorhexa adalah alat yang sangat baik untuk mengetahui warna mana yang boleh digunakan bersama. Jika anda masih mencari warna, lihat pemetik warna UI yang rata.
2. Padankan palet anda - biasanya lebih baik untuk dipadankan dengan mana -mana palet yang anda gunakan. Jika anda masih mencari palet warna, lihat lolcolors.

elemen asas 2 -shadow

box-shadow membolehkan anda menambah bayang -bayang di sekitar objek. Bayang -bayang yang unik boleh ditambah ke setiap sisi, dan UI dan reka bentuk bahan yang diratakan mengambil kesempatan daripada idea itu. Untuk mengetahui lebih lanjut mengenai box-shadow, sila periksa dokumentasi MDN box-shadow.

Elemen Asas 3 -Tempoh Peralihan

transition-duration membolehkan anda menambah skala masa untuk perubahan CSS. Butang tanpa masa penukaran akan segera diubah menjadi :hover CSS, yang mungkin menyinggung perasaan kepada pengguna. Banyak butang dalam panduan ini menggunakan masa penukaran untuk mencipta rasa semula jadi.

Contoh berikut menukarkan gaya butang dengan cara yang lembut (lebih dari 0.5 saat) apabila :hover:

.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;
}

Kod untuk menjalankan penukaran adalah rumit, jadi pelayar lama mengendalikan penukaran sedikit berbeza. Oleh itu, kita perlu memasukkan awalan vendor untuk pelayar yang lebih tua.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Padam gaya butang lalai

Untuk mengalih keluar gaya penyemak imbas lalai dari unsur -unsur <button> supaya kami dapat memberikannya dengan gaya tersuai, kami menyertakan CSS berikut:

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

Walau bagaimanapun, lebih baik memohon kepada kelas pada elemen butang, dan bukannya semua butang secara lalai.

Terdapat banyak cara yang kompleks dan menarik untuk mengubah cara mengubah CSS anda, dan semakan cepat ini hanya merangkumi asas -asas.

Gaya Tiga Butang

1 - Butang hitam dan putih sederhana

Ini biasanya butang pertama yang saya tambahkan dalam projek sampingan saya kerana kesederhanaannya berfungsi dalam pelbagai gaya. Gaya ini menggunakan kontras sempurna semulajadi hitam dan putih.

Kedua -dua perubahan ini sangat serupa, jadi kami hanya akan memperkenalkan kod dengan butang hitam dengan latar belakang putih. Untuk mendapatkan butang lain, hanya flip setiap putih dan hitam.

.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

2 - Butang UI Flat

Flat UI memberi tumpuan kepada minimalism dan menceritakan kisah besar melalui tindakan kecil. Sebaik sahaja projek saya mula terbentuk, saya biasanya berhijrah dari butang hitam dan putih ke butang UI yang rata. Butang UI rata cukup mudah untuk dimuatkan ke dalam kebanyakan reka bentuk.

mari kita memperbaiki butang sebelumnya dengan menambah pergerakan butang untuk mensimulasikan butang 3D.

Contoh ini mengandungi lima butang, tetapi kerana satu -satunya perubahan adalah warna, kita akan memberi tumpuan kepada butang pertama.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Butang ini mempunyai tiga negeri: Umum (Nama Tanpa States),

dan :hover. :active

Perlu diperhatikan bahawa

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

Pembolehubah CSS bukanlah sesuatu yang baru, tetapi ada yang digunakan dengan cara baru.

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

butang UI rata digunakan secara meluas

. 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.

Butang UI rata nilai pergerakan mudah dan minimum yang menceritakan kisah besar. Ramai menggunakan

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

3 - Reka Bentuk Bahan

Reka bentuk bahan adalah konsep reka bentuk yang menggalakkan kad maklumat dan ciri -ciri tindakan yang menarik. Google merancang konsep "reka bentuk bahan" dan menyenaraikan tiga prinsip utama pada laman web reka bentuk bahan:

bahan adalah metafora
berani, grafik, tujuan
Sukan memberi makna

untuk lebih memahami tiga prinsip ini, mari kita lihat aplikasi praktikal reka bentuk bahan.

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 /* 这是标准的，并且适用于大多数现代浏览器 */
-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

Artikel ini menerangkan cara menggunakan tiga kaedah reka bentuk yang berbeza untuk membuat butang. Jika anda ingin membuat prototaip reka bentuk butang anda sendiri, saya cadangkan menggunakan penjana butang CSS3.

Kesimpulan

butang hitam dan putih adalah mudah dan boleh dipercayai. Gantikan hitam dan putih dengan warna jenama anda untuk mendapatkan akses cepat ke butang yang berkaitan dengan laman web anda. Butang UI rata adalah mudah dan menggunakan tindakan kecil dan warna untuk menceritakan kisah besar. Butang reka bentuk bahan menggunakan tindakan kompleks besar untuk mensimulasikan bayang -bayang dunia nyata, dengan itu menarik perhatian pengguna.

Harap panduan ini akan membantu pemula CSS memahami blok bangunan yang membuat butang begitu kuat dan kreatif.

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

, dan sebagainya. Kemudian, dalam fail HTML, anda boleh membuat elemen butang dan memohon kelas

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

.

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

anda boleh menggunakan kelas pseudo

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

atau 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

. Harta ini digunakan untuk menentukan jejari sudut sempadan. Nilai 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

. Harta ini digunakan untuk menggunakan kesan bayangan kepada elemen. Harta

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

. Harta ini digunakan untuk mengawal kelajuan di mana pengguna berubah dari satu gaya ke yang lain apabila dia melayang ke atas butang atau mengklik butang. mengambil pelbagai nilai, termasuk atribut yang akan ditukar, tempoh penukaran, fungsi masa, dan kelewatan.

Bagaimana untuk membuat butang CSS dengan animasi?

Butang CSS dengan animasi boleh dibuat menggunakan sifat animation dan keyframes peraturan. Atribut animation digunakan untuk menentukan nama, tempoh, fungsi masa, kelewatan, bilangan lelaran, arah, mod isi, dan status main balik animasi. Peraturan keyframes digunakan untuk menentukan gaya untuk setiap peringkat animasi.

Bagaimana membuat butang CSS responsif?

Butang CSS responsif boleh dibuat menggunakan pertanyaan media. Pertanyaan media digunakan untuk menggunakan gaya yang berbeza untuk peranti atau saiz skrin yang berbeza. Sebagai contoh, anda boleh menentukan pertanyaan media yang mengubah saiz, mengisi, dan saiz fon butang untuk skrin dengan lebar kurang daripada 600 piksel.

Bagaimana untuk membuat butang CSS dengan bentuk yang berbeza?

Butang CSS dengan bentuk yang berbeza boleh dibuat menggunakan atribut

dan border-radius. Hartanah transform boleh digunakan untuk membuat butang bulat atau bujur. Hartanah border-radius boleh digunakan untuk memutar, zum, kecondongan, atau butang pan. transform

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