CSS3 Putaran Tombol untuk Blogger

CSS telah menjadi bagian integral dari desain blog.We tampan sangat penting sehingga meninggalkan bekas di situs readers.A baik Anda mencari selalu diingat oleh perintah reader.In untuk mendapatkan pembaca Anda perhatian mereka adalah trik tertentu dan tweak dengan mana Anda akan dapat meninggalkan impression.There WOW adalah beberapa widget yang menggunakan widget CSS.These telah menjadi sangat umum dan karenanya mereka tidak appealing.Their harus ada unsur kejutan di blog Anda blog.Some mengandalkan linking.Buttons eksternal cara yang lebih baik daripada links.Adding teks sederhana dari tombol di blog Anda tidak begitu task.Today sulit saya akan menampilkan metode sederhana dengan mana Anda akan dapat menambahkan babak baru yang menarik terpojok CSS tombol buttons.These sangat mudah untuk use.So mari kita pergi ke depan dan memotong kue.



Fitur

    Tersedia dalam berbagai warna
    Kecil Coding
    Hover Efek
    Bevel Efek digunakan untuk mode aktif
    CSS 3 yang digunakan (versi terbaru dari CSS)
    Penyebab ada penundaan dalam waktu buka halaman webCSS3 Putaran Tombol Demo


Live Demo

 Menambahkan CSS

    Pergi ke Blogger Dashboard
    Klik Menu dropdown dan pilih Template
    Backup Template Anda sebelum membuat perubahan ke blog Anda
    Sekarang Klik Edit HTML -> Lanjutkan -> Expand Widget Templates    Tekan Ctrl + F dan cari kode yang ditunjukkan di bawah ini


]]></b:skin>

    Sekarang Paste Kode yang ditunjukkan di bawah sebelum / di atasnya
/* Exciting Round Buttons By YOURPCGENIE.NET*/
.excitinground{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.excitinground a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.excitinground a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.excitinground a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.excitinground a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.excitinground a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.excitinground a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.excitinground a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.excitinground a:hover, .excitinground:hover { color: #fff; opacity: .7 }


Menggunakan Tombol di Post AndaDi mana pun Anda ingin menggunakan tombol di posting Anda pilih salah satu dari kode di bawah ini yang mungkin menarik nama warna you.The menunjukkan warna button.Later Anda dapat mengganti nama warna dengan teks Anda sendiri.

<span class="excitinground"><a class="red" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>

   

<span class="excitinground"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="green" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>

<span class="excitinground"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span> 

   Ganti http://www.YOUR-LINK-HERE.com dengan Anda sendiri link / url.
    Juga mengubah TEXT ANDA dengan teks yang ingin ditampilkan

Saya harap tombol yang berguna untuk tombol kamu.Ini adalah hasil dari efforts. menghargai mereka dengan berbagi posting ini dengan teman / kerabat dll Juga meninggalkan pandangan Anda di bawah ini dan membantu saya memahami kegembiraan dan kesedihan.