Framework CSS – CSS3 Buttons

Zaman Instan…!!! Mungkin itulah yang terlintas di pikiran saya ketika bertemu dengan yang namanya framework. Mulai dari framework PHP seperti CakePHP, CodeIgniter, Panada dan yang lainnya. Framework Javascript seperti jQuery, MooTools dan kawan-kawannya. Di ranah aplikasi desktop ada framework .Net miliknya Microsoft. Dan saya baru tau, ternyata ada juga framework untuk CSS. Awalnya saya tidak begitu peduli dengan framework CSS ini, karena saya berpikir toh saya juga sudah memahami CSS. Tepatnya kemarin, lantaran iseng gak ada kerjaan+suntuk ngurusin proposal lomba dan kerjaan, saya coba lagi mencari informasi tentang berbagai macam-macam framewok. Ketemu lagi deh sama framework CSS, yang bernama CSS3 Buttons. Yang membuat saya tertarik untuk mencobanya adalah karena sifatnya yang instan dalam membuat sebuah tampilan tombol sederhana dengan icon-icon yang lucu alias unyu-unyu (#lebay). Langsung saja saya coba, dan contoh hasil jadinya seperti di bawah ini.

Simple and Clean..!!! Itulah kesan yang muncul ketika saya melihat tampilan tombol yang dihasilkan dengan CSS3 Buttons ini. Dengan menggunakan framework CSS3 Buttons ini, kitatidak perlu membuat style tombol secara manual lagi. Tinggal panggail css-nya dan gunakan class-class-nya. Penggunaanya pun sangat mudah, misalnya jika ingin membuat sebuah tombol biasa tanpa icon kita hanya perlu membuat syntax html seperti di bawah ini :

<a class="button" href="#">This is a Button</a>

1<a class="left primary pill button" href="#">Archive</a>
2<a class="middle pill button" href="#">Report Spam</a>
3<a class="middle pill button" href="#">Edit Post</a>
4<a class="right negative pill button" href="#">Delete</a>

<a class="left negative pill button" href="#"><span class="magnifier icon"></span>Archive</a>
<a class="middle negative pill button" href="#"><span class="pin icon"></span>Report Spam</a>
<a class="middle negative pill button" href="#"><span class="pen icon"></span>Edit Post</a>
<a class="middle negative pill button" href="#"><span class="plus icon"></span>Add Post</a>
<a class="middle negative pill button" href="#"><span class="user icon"></span>Add User</a>
<a class="right negative pill button" href="#"><span class="cross icon"></span>Delete</a>

Untuk tombol yang menggunakan class icon lainnya, kita hanya perlu mengganti class dari tag span, kira-kira tampilannya.kurang lebihnya seperti itu lebih jelas nya nanti akan saya buatkan vidio turorial nya di Youtobe: https://www.youtube.com/channel/UC-vWdY5gUFpG_RknwNSuMag

0 Shares:
Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like