Cara membuat tombol view demo warna warni CSS3 dengan efek di tekan

Apakah Anda seorang desainer? atau Anda sering berbagi widget, template, dll di blog? Jika ya, maka Anda harus mampu mendemonstrasikan skill atau keahlian Anda dalam hal merancang, mendemonstrasikan widget, template, dll.  

Sebagian besar dari Anda mungkin menggunakan semacam tombol 'View Demo' atau 'Lihat Demo' tapi kebanyakan dari mereka mungkin memiliki gambar di tombol tersebut. Baru-baru ini  tombol Widget share jejaring sosial juga mencakup gambar. Untungnya sekarang ini setelah kemajuan CSS untuk Level 3, kita dapat membuat tombol yang cantik dan menarik tanpa gambar atau script.  

Keuntungan dari menggunakan murni CSS3 adalah tidak terlalu memberatkan loading blog anda. Sebagai seorang blogger atau desainer kita harus selalu mencari cara untuk meminimalkan loading blog sebanyak mungkin tanpa merugikan tampilan dan nuansa dari blog dengan memanfaatkan beberapa teknik dasar dan lanjutan dari CSS.  

Postingan kali ini saya akan share ke anda tentang cara membuat tombol view demo warna warni CSS3 dengan efek di tekan. Semua tombol telah diuji dan bekerja dengan baik di Firefox, Chrome, Opera maupun Internet Explorer.

View Demo

Bagaimana cara menggunakan tombol-tombol ini?

Sebelum kita mulai, Anda harus tahu bagaimana menggunakan tombol-tombol ini. Karena setiap tombol-tombol di bawah ini  ada file CSS yang terpasang.

1. Masuk ke akun blogger anda -> Template -> Edit HTML -> Proceed
2. Centang Expand Template Widget
3. Cari Tag ]]></b:skin>  (untuk memeudahkan pencarian gunakan  Ctrl + F)
4. Tepat diatas kode ]]></b:skin> pastekan salah satu kode CSS yang terlampir dibawah ini (untuk mendapatkan kode CSS silahkan klik "View CSS" )

Catatan:  

Setiap kali anda ingin menerapkan gaya (style) tombol-tobol tersebut dalam postingan blog atau dimana saja, gunakan kode-kode HTML yang telah diberikan untuk setiap tombol masing-masing.
Jangan Lupa untuk mengganti tanda # dengan Link anda.

Tombol-tombolnya antara lain:

Shiny Black

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-black gradient" href="#" target="_blank">View Demo</a>

Shiny Blue (Biru mengkilat)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-blue gradient" href="#" target="_blank">View Demo</a>


Green (Hijau)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-green gradient" href="#" target="_blank">View Demo</a>


Magenta

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-magenta gradient" href="#" target="_blank">View Demo</a>


Shiny Orange (warna jingga mengkilat)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-orange gradient" href="#" target="_blank">View Demo</a>

Pink (Merah muda)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-pink-beauty gradient" href="#" target="_blank">View Demo</a>
 

Slick Blue (Biru licin / halus)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-slick-blue gradient" href="#" target="_blank">View Demo</a>

Slick dark red (Merah tua licin / halus)

1. View CSS
2. Kode HTML yang digunakan:

<a class="button-slick-dark-red gradient" href="#" target="_blank">View Demo</a>


Semoga bermanfa'at...

Original Source

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.11