Tutorial CSS : Berkenalan Dengan 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.

ArchiveReport SpamEdit PostAdd PostAdd UserDelete

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>

This is a Button

Kalau ingin membuat group button dengan style melengkung di sisi-sisinya, bisa menggunakan class seperti di bawah ini :

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

ArchiveReport SpamEdit PostDelete

Dan yang terakhir, jika ingin menggunakan style tombol yang ada icon-nya, bisa menggunakan class seperti di bawah ini :

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

ArchiveReport SpamEdit PostAdd PostAdd UserDelete

Untuk tombol yang menggunakan class icon lainnya, kita hanya perlu mengganti class dari tag span, kira-kira tampilannya seperti di bawah ini :

Cukup mudah kan mengaplikasikan CSS3 Buttons ini pada halaman html yang kita buat? Untuk men-download CSS3 Buttons ini, silahkan kunjungi link berikut. Nah, di luar sana masih CSS Framework yang mempunyai kelebihan masing-masing. Mudah-mudahan saya bisa membahas framewok CSS yang lainnya di postingan saya selanjutnya. OK deh, sekian dulu sedikit penjelasan saya tentang CSS3 Buttons ini, mudah-mudahan bisa bermanfaat untuk rekan-rekan

Happy Blogging and Keep Coding

Cheerrrsss….!!!!