Cara Membuat Tombol / Button Dengan CSS Di Blogger




Cara Membuat Tombol / Button Dengan CSS Di Blogger
Button CSS3
Selamat siang rekan blogger, pada siang ini saya akan berbagi Cara Membuat Tombol / Button Dengan CSS Di Blogger. Nah Fungsi tombol / button pada blog atau website adalah digunakan untuk tombol demotombol downloadspoiler dan banyak lagi. Dan ada banyak bentuk maupun warna warni dari modifikasi sebuah button atau tombol, ada banyak pula teknik dari pembuatan button pada blog.

Pada penjelasan Cara Membuat Tombol / Button Dengan CSS Di Blogger ini, saya hanya berbagi ilmu saja  kepada anda untuk mencoba memanfaatkan sebuah tool css code generator. Dengan cara yang  sangat mudah, simple dan peraktis cepat. Anda bisa membuat aneka bentuk dengan tampilan button / tombol yang cantik dan keren.

Pengertian dari CSS Button Generator.com adalah website yang menyediakan alat css button generator gratis yang memungkinkan Anda bisa membuat bermacam-macam button / tombol yang cantik dan keren sesuai selera keinginan anda. 

Nah yang menarik dalam pembuatan button dengan CSS ini adalah:

  • pure atau total menggunakan CSS, tanpa image (gambar) maupun Javascript
  • lebih fleksibel dan scalable, dapat menyesuaikan ukuran tombol, font, warna, border, gradient color, dll.
  • memiliki 3 state, yaitu Normal, Hover dan Active. 
  • dapat diimplementasikan pada berbagai element HTML, diantaranya: a, input, button, span, div, p, h3, dsb. 
  • standard browser compatible, loading lebih cepat karena imageless (noimage required)

Di bawah ini adalah contoh hasil dari pembuatan button dengan  CSS Button Generator, jika anda ingin membuat Button tersebut klik saja di BUAT BUTTON

Contoh Bentuk Tombol/Button 

Sample Button / Tombol Dengan Menggunakan CSS Button Generator

Sample Button 1

BUTTON

BUTTON

BUTTON

Sample Button 2

BUTTON

BUTTON

BUTTON


Sample Button 3 (transparent)


BUTTON

BUTTON

Untuk gambar contoh tombol / button  diatas menunjukkan bahwa banyak sekali yang bisa kita lakukan untuk dalam pembuatan button dengan menggunkan CSS Button Generator. Dengan cara mudah Anda bisa merubah tampilan baik ukuran, warna background, gradient, border, border radius atau rounded, shadow, text shadow dan lainnya, semua bisa dapat diatur sesuai selera. jika anda tidak males. hehe. 

Bagi anda ingin memulai membuat button / tombol yang keren dengan CSS , ada baiknya untuk melihat  terlebih dahulu dan memahami video gambar gif area kerja di  CSS Button Generator dibawah ini : 

Pada gambar diatas ada 3 area kerja di CSS Button Generator yaitu :
  • area setting : 
disini Anda bisa mengatur css button mulai pemberian nama button (classnname) pada CSS class name
mengatur ukuran text dan jenis font, nama judul button pada Button Tex
mengatur border size, border radius (rounded), box shadow, efek inset, text shadow, blur radius, spread radius, dll
.
  • area preview:
hasil tampilan button yang telah diatur di area setting, tampilan button akan terlihat di area preview ini
klik pada tombol / button di area ini untuk generated code CSS atau code css button yang telah dibuat
  • area code css:
disini Anda bisa copy semua code css button tadi untuk ditampilkan di blog Sangat simple dan sederhana memang, tapi  membuat button dengan css di CSS Button Generator ini, menurut saya pribadi  tampilan button / tombol sangat cantik dan praktis, sehingga bisa digunakan pada elemen HTML sesuai keinginan, seperti di postingan artikel, tombol demo dan download, atau pasang sebagai widget di blog. Dan tidak perlu menggunakan tombol yang standard yang mungkin tampilanya monoton dan kurang menarik.

Cara Membuat Tombol / Button Dengan CSS

  1. Pertama , pastikan anda sudah masuk di dasbhor andasendiri
  2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode disamping ini ]]></b:skin> cara cepat pencarian tekan CTRL+F
  4. Masukan kode yang teah anda dapatkan tadi di atas kode ]]></b:skin> 
  5. Jika anda tidak ingin susah-susah untuk membuat tombol/button tersebut, maka bisa anda copas code Css di bawah ini  dan paste di atas kode ]]></b:skin>
    <style type="text/css">
    .button {
     -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
     -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
     box-shadow:inset 0px 1px 0px 0px #bbdaf7;
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4439e3) );
     background:-moz-linear-gradient( center top, #79bbff 5%, #4439e3 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4439e3');
     background-color:#79bbff;
     -webkit-border-top-left-radius:20px;
     -moz-border-radius-topleft:20px;
     border-top-left-radius:20px;
     -webkit-border-top-right-radius:20px;
     -moz-border-radius-topright:20px;
     border-top-right-radius:20px;
     -webkit-border-bottom-right-radius:20px;
     -moz-border-radius-bottomright:20px;
     border-bottom-right-radius:20px;
     -webkit-border-bottom-left-radius:20px;
     -moz-border-radius-bottomleft:20px;
     border-bottom-left-radius:20px;
     text-indent:0;
     border:1px solid #84bbf3;
     display:inline-block;
     color:#ffffff;
     font-family:Georgia;
     font-size:15px;
     font-weight:bold;
     font-style:normal;
     height:50px;
     line-height:50px;
     width:100px;
     text-decoration:none;
     text-align:center;
     text-shadow:1px 1px 0px #528ecc;
    }
    .button:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4439e3), color-stop(1, #79bbff) );
     background:-moz-linear-gradient( center top, #4439e3 5%, #79bbff 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4439e3', endColorstr='#79bbff');
     background-color:#4439e3;
    }.button:active {
     position:relative;
     top:1px;
    }
    </style>
    /* This button was generated using CSSButtonGenerator.com */
  6. Jika sudah anda masuk kan kode css di atas langsung anda klik Save Template.
  7. Dan lihat hasilnya setelah itu.
Untuk pemakaian tombol/button css pada blog, pada postingan, atau widget dengan menggunakan kode HTML tersebut: 
<a href="#" class="button">mizipediacom</a>
Kode yang di dalam catatan adalah untuk metode penulisan di post editor pada mode HTML 

Nah demikian penjelasan saya pada hari, jika anda mengalami kendala dalam pemasangan bisa langsung berkomentar di bawah ini, jika saya tidak dalam keadaan sibuk saya akan membantu anda.

Jangan Lupa Baca Juga Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect