butang CSS
Butang CSS
Dalam bab ini kami akan memperkenalkan anda menggunakan CSS untuk membuat butang.
Mari kita lihat dahulu pada butang lalai dan butang yang dibuat dengan css
php中文网(php.cn) CSS 按钮
链接按钮
Jalankan program dan lihat
Warna butang
Kita boleh menggunakan atribut warna latar belakang untuk menetapkan warna butang:
Instance
php中文网(php.cn) 按钮颜色
我们可以使用 background-color 属性来设置按钮颜色:
Jalankan Lihatlah program ini
Saiz butang
Kita boleh menggunakan saiz fon atribut untuk menetapkan saiz butang:
Contoh
php中文网(php.cn) 按钮大小
我们可以使用 font-size 属性来设置按钮大小:
Jalankan program dan lihat
Butang Bulat
Kita boleh menggunakan atribut jejari sempadan untuk menetapkan butang bulat:
php中文网(php.cn) 圆角按钮
我们可以使用 border-radius 属性来设置圆角按钮:
Jalankan program dan lihat
Warna sempadan butang
Kita boleh menggunakan atribut sempadan untuk menetapkan warna sempadan butang:
php中文网(php.cn) 按钮边框颜色
我们可以使用 border 属性设置按钮边框颜色:
Jalankan program dan lihat
Butang tetikus
Kita boleh menggunakan pemilih :hover untuk mengubah suai gaya butang tuding tetikus.
Petua: Kita boleh menggunakan atribut tempoh peralihan untuk menetapkan kelajuan kesan "legar":
php中文网(php.cn) 鼠标悬停按钮
Jalankan program dan lihat
Bayang Butang
Tunjukkan butang Bayang bayang demi tetikus
Kita boleh menggunakan atribut box-shadow untuk menambah bayang pada butang:
php中文网(php.cn) 按钮阴影
Jalankan program dan lihat
Lumpuhkan butang
Kita boleh menggunakan atribut kelegapan untuk menambah ketelusan pada butang (kelihatan seperti kesan atribut "kurang upaya").
Petua: Kami boleh menambah atribut kursor dan menetapkannya kepada "tidak dibenarkan" untuk menetapkan imej yang dilumpuhkan:
php中文网(php.cn) 禁用按钮
Jalankan program Lihatlah
Lebar Butang
Saiz lalai bagi butang Ditentukan oleh kandungan teks pada butang (panjang sepadan berdasarkan kandungan teks). Kita boleh menggunakan atribut lebar untuk menetapkan lebar butang:
Petua: Jika anda ingin menetapkan lebar tetap, anda boleh menggunakan piksel (px) sebagai unit, jika anda ingin menetapkan butang responsif, anda boleh menetapkannya sebagai peratusan .
php中文网(php.cn) 按钮宽度
Jalankan program dan lihat
Kumpulan butang
Alih keluar jidar dan tambah float:left untuk menetapkan kumpulan butang:
php中文网(php.cn) 按钮组
移除外边距并添加 float:left 来设置按钮组:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
Jalankan program dan lihat
Kumpulan butang bersempadan
Kita boleh menggunakan atribut sempadan untuk menetapkan kumpulan butang bersempadan:
php中文网(php.cn) 带边框按钮组
Add borders to create a bordered button group:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
Jalankan program untuk mengambil lihat
Animasi butang
Tambah anak panah selepas menggerakkan tetikus ke atas butang Tandakan:
php中文网(php.cn) 按钮动画
Jalankan program dan lihat
Klik Tambah kesan "riak":
php中文网(php.cn) 按钮动画 - 波纹效果
Jalankan program dan lihat
Tambah kesan "tekan ke bawah" apabila diklik:
php中文网(php.cn) 按钮动画 - "按压效果"
Jalankan program dan lihat
![Pertempuran sebenar Vue3 bahagian hadapan [projek vue tulisan tangan]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutorial APIPOST [Popularisasi konsep teknikal yang berkaitan dengan komunikasi rangkaian]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
