Buat tombol keren menggunakan CSS3 dan RGBa

Nah, melihat judul ini, kita bisa mengabaikan browser IE terlebih dahulu.

Saya akui bahwa saya memiliki kecenderungan minimalis dan saya ingin dapat berbuat lebih banyak dengan jumlah kode dan gambar yang paling sedikit.

Meskipun CSS3 hanya menambahkan beberapa fitur baru, properti ini dapat melakukan banyak hal berguna dan sangat menyederhanakan pekerjaan kita. Tombol yang kami buat hari ini memanfaatkan sepenuhnya efek sudut membulat, bayangan kotak, dan bayangan teks CSS3, sambil menggunakan warna RGBa.

Mari kita lihat demonya terlebih dahulu:

Kita dapat membuat tombol cantik ini dalam empat langkah:

1. Pengaturan dasar tombol

Kita perlu mengatur gaya dasar tombol terlebih dahulu. Di sini kita menggunakan tag a. Tentu saja, Anda juga dapat menggunakan tag input, tag tombol, dll. Tag a digunakan di sini karena hanya tag a di antara ketiga tag tersebut yang mendukung. : arahkan kelas semu.

Terima kasih kepada Sepatu Anak ytzong atas sarannya. Kami mengubah menjadi display:inline-block, yang dapat menyimpan baris kode float dan margin. ——[email protected]

2. Gambar gradien png semi transparan

Ini adalah satu-satunya gambar yang kami gunakan di sini. Gambar png transparan ini digunakan untuk mencapai gradien warna. Kita dapat menyebut gambar ini sebagai gradien transparansi monokrom. Di CSS, Anda dapat mencapai efek gradien warna yang berbeda dengan menggunakan demo latar belakang + gambar png seperti ini. Tentu saja, ini bukan fitur CSS3. Kecuali untuk browser di bawah IE6, semua browser dapat mencapai efek ini. Anda dapat mengklik di sini untuk melihat file png.

3. Sudut membulat

Sudut membulat (batas-radius) adalah salah satu fitur CSS3 terbaik yang saat ini didukung oleh browser. Selain browser IE, semua browser level A mendukungnya. Meskipun sebagian besar diimplementasikan melalui atribut pribadi, setidaknya tersedia. .

4.Bayangan dan RGBa

Box-shadow dan text-shadow adalah dua properti penting baru yang ditambahkan ke CSS3. Mereka dapat dengan mudah mengimplementasikan bayangan elemen tingkat blok dan bayangan teks. Namun, bukankah lebih baik jika warna bayangannya semi transparan? Dengan cara ini elemennya akan lebih menyatu dengan latar belakang. Perlu dicatat bahwa FF hanya mendukung atribut text-shadow hingga versi 3.5 (saat ini didukung oleh Firefox 3.5beta4).

 .btn {
 ...
 latar belakang: #222 url(sprite.png) ulangi-x;
 /**Gambar latar belakang**/
 -moz-batas-radius: 5px;
 -radius-perbatasan webkit: 5 piksel;
 radius batas: 5px;
 /**sudut membulat**/
 -webkit-kotak-bayangan: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**Bayangan Tombol**/
 bayangan-teks: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**bayangan teks**/
 }

Oke, sekarang tombol kita sudah selesai sepenuhnya. Itu telah mencapai tujuan kami.

Tombol ini berwarna hitam, sehingga tombol dengan warna lain lebih mudah diterapkan:

Harap dicatat bahwa gaya ini harus ditempatkan setelah .btn. Dengan cara ini, warna latar belakang tombol hijau, biru, merah, dll. dapat menggantikan warna latar belakang .btn. dan kemudian gunakan

Terakhir, mari kita kasihan pada browser IE. Tombol-tombol ini akan menampilkan sudut siku-siku, warna gradien, tanpa bayangan, dan tidak ada warna transparan di browser IE7 dan IE8, tetapi di IE6, tombol tersebut akan menampilkan latar belakang biru muda tidak mendukung transparansi png. Jika Anda ingin terlihat seperti tombol di IE6, cukup gunakan filter IE setelah js.