Cara Membuat Tombol Animasi CSS - Atau Button Download




button yang berati tombol dalam istilah bahasa pemogeraman. dan apa fungsi dari tombol button.
kegunaan tombol ini adalah bisa anda gunakan sebagai tombol DOWNLOD,DEMO,TAG,atau menu dibawah artikel terkait. 
sesuai anda akan fungsikan menjadi tombol apa. atau bisa untuk recomndasi artikel yang ada di blog anda.

sebagai contoh bisa anda lihat di bawah artikel saya tentu saja cara ini sudah saya gunakan dan hasilnya bisa anda lihat di bawah artike ini atau di setiap postingan saya 

apa admin blog ini mengunakanya ya saya membagikan tutorial Cara pembuatan button warana warni ini tentu saja sudah saya gunakan sendiri untuk mempercatik blog saya

nah pembuatanya agar blog sobat cantik caranya gimana. tidak usah bingung saya akan berbagi sedikit ilmu kepada kalian.


walupun tidak sehebat progremmer handal setidak cara membuat botton ini dapat membantu menaikan artikel kalian jika langsung dibawah postingan kita sehingga pengunjung dapat langsung melihat kategori blog kita. dan caranya juga tidak ribet dan mudah.


Cara Membuat Tombol Animasi CSS - Atau Button Download



Caranya seperti berikut :


1. Silahkan login ke blog

2. klik tema dan klik lagi edit HTML
3.Masukan kode CSS di bawah ini tepat di bagian atas kode ]]></b:skin>atau </style>


.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear} .button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
.button.orange,input.button.orange{background-color:rgba(250,111,87,1)}
.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)} .button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important} .button.red,input.button.red{background-color:rgba(253,104,91,1)} .button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}
.button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}
.button.orange:hover,input.button.orange:hover{background-color:rgba(250,111,87,0.9)} .button.yellow,input.button.yellow{background-color:rgba(254,205,94,1)} .button.yellow:hover,input.button.yellow:hover{background-color:rgba(254,205,94,0.9)} .button.green,input.button.green{background-color:rgba(161,210,110,1)} .button.green:hover,input.button.green:hover{background-color:rgba(161,210,110,0.9)} .button.mint,input.button.mint{background-color:rgba(79,206,173,1)}
.button.pink,input.button.pink{background-color:rgba(234,137,191,1)}
.button.aqua,input.button.aqua{background-color:rgba(85,193,231,1)} .button.aqua:hover,input.button.aqua:hover{background-color:rgba(85,193,231,0.9)} .button.blue,input.button.blue{background-color:rgba(96,158,234,1)} .button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)} .button.purple,input.button.purple{background-color:rgba(171,148,233,1)} .button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)}
.button.dark-grey:hover,input.button.dark-grey:hover{background-color:rgba(84,87,102,0.9)}
.button.pink:hover,input.button.pink:hover{background-color:rgba(234,137,191,0.9)} .button.white,input.button.white{background-color:rgba(255,255,255,1);color:#545766!important} .button.white:hover,input.button.white:hover{background-color:rgba(255,255,255,0.9)} .button.grey,input.button.grey{background-color:rgba(170,178,188,1)} .button.grey:hover,input.button.grey:hover{background-color:rgba(170,178,188,0.9)} .button.dark-grey,input.button.dark-grey{background-color:rgba(84,87,102,1)}
.button.transparent.red:hover,input.button.transparent.red:hover{border:2px solid rgba(253,104,91,1);background-color:rgba(253,104,91,1);color:#fff!important}
.button.transparent,input.button.transparent{border:2px solid rgba(84,87,102,1);background-color:transparent;color:rgba(84,87,102,1)!important} .button.transparent:hover,input.button.transparent:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important} .button.transparent.red,input.transparent.button.red{border:2px solid rgba(253,104,91,1);color:rgba(253,104,91,1)!important} .button.transparent.orange,input.transparent.button.orange{border:2px solid rgba(250,111,87,1);color:rgba(250,111,87,1)!important}
.button.transparent.green:hover,input.button.transparent.green:hover{border:2px solid rgba(161,210,110,1);background-color:rgba(161,210,110,1);color:#fff!important}
.button.transparent.orange:hover,input.button.transparent.orange:hover{border:2px solid rgba(250,111,87,1);background-color:rgba(250,111,87,1);color:#fff!important} .button.transparent.yellow,input.transparent.button.yellow{border:2px solid rgba(254,205,94,1);color:rgba(254,205,94,1)!important} .button.transparent.yellow:hover,input.button.transparent.yellow:hover{border:2px solid rgba(254,205,94,1);background-color:rgba(254,205,94,1);color:#fff!important} .button.transparent.green,input.transparent.button.green{border:2px solid rgba(161,210,110,1);color:rgba(161,210,110,1)!important}
.button.transparent.blue:hover,input.button.transparent.blue:hover{border:2px solid rgba(96,158,234,1);background-color:rgba(96,158,234,1);color:#fff!important}
.button.transparent.mint,input.transparent.button.mint{border:2px solid rgba(79,206,173,1);color:rgba(79,206,173,1)!important} .button.transparent.mint:hover,input.button.transparent.mint:hover{border:2px solid rgba(79,206,173,1);background-color:rgba(79,206,173,1);color:#fff!important} .button.transparent.aqua,input.transparent.button.aqua{border:2px solid rgba(85,193,231,1);color:rgba(85,193,231,1)!important} .button.transparent.aqua:hover,input.button.transparent.aqua:hover{border:2px solid rgba(85,193,231,1);background-color:rgba(85,193,231,1);color:#fff!important} .button.transparent.blue,input.transparent.button.blue{border:2px solid rgba(96,158,234,1);color:rgba(96,158,234,1)!important}
.button.transparent.white,input.transparent.button.white{border:2px solid rgba(255,255,255,1);color:rgba(255,255,255,1)!important}
.button.transparent.purple,input.transparent.button.purple{border:2px solid rgba(171,148,233,1);color:rgba(171,148,233,1)!important} .button.transparent.purple:hover,input.button.transparent.purple:hover{border:2px solid rgba(171,148,233,1);background-color:rgba(171,148,233,1);color:#fff!important} .button.transparent.pink,input.transparent.button.pink{border:2px solid rgba(234,137,191,1);color:rgba(234,137,191,1)!important} .button.transparent.pink:hover,input.button.transparent.pink:hover{border:2px solid rgba(234,137,191,1);background-color:rgba(234,137,191,1);color:#fff!important} .button.transparent.white:hover,input.button.transparent.white:hover{border:2px solid rgba(255,255,255,1);background-color:rgba(255,255,255,1);color:#545766!important}
.button.transparent.dark-grey:hover,input.button.transparent.dark-grey:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important}
.button.transparent.grey,input.transparent.button.grey{border:2px solid rgba(170,178,188,1);color:rgba(170,178,188,1)!important} .button.transparent.grey:hover,input.button.transparent.grey:hover{border:2px solid rgba(170,178,188,1);background-color:rgba(170,178,188,1);color:#fff!important}
.button.transparent.dark-grey,input.transparent.button.dark-grey{border:2px solid rgba(84,87,102,1);color:rgba(84,87,102,1)!important}

4. Klik simpan template
5. buatlah postingan baru atau masuk postingan anda yang lama buka mode HTML lalu anda pastekan kode HTML dibawah ini dibawah postingan atau sesuai keinginan anda

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button yellow" href="#">yellow Button</a> <a class="button aqua" href="#">aqua Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button pink" href="#">pink Button</a> <a class="button white" href="#">white Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>

6. untuk masalah warna pada kolom bisa anda rubah sesuai kenginan anda.

7. untuk postingan kode diatas bisa anda tambahkan kode <br/> untuk memberi jarak dengan artikel
untuk memberi jarak dengan artikel postingan anda

8. lalu anda masukan link akti pada kode HTML diatas pada kode sepertini "#" pada kode pagar masukan link kalian

Note :

gimana sobat cukub mudahkan dan dapat mempercantik blok kalian sehingga betah mengunjungi situs kalian.


jika anda kurang jelas dalam tutorial ini silahkan anda tanyakan di kolom komentar tentang artikel diatas saja ya.

nah hasilnya akan seperti dibawah ini

BACA JUGA ARTIKEL SELANJUTNYA

kesehatan Blog TIPS Tutorial Ponsel Motivasi Wisata