Cara Membuat Button Animasi CSS

Cara Membuat Button Animasi CSS
Font Size :
Dark Mode
Reset Mode

Cara Membuat Tombol Download dan Demo - Button Download atau bisa dibilang juga dengan tombol, baik tombol download, demo, dan lainnya, Sesuai fungsi yang diinginkan. Membuat Button ini tidaklah sulit sobat, disini admin mencoba membagikan button download versi animated css hover, jadi terlihat lebih menarik dan wow pastinya :D

Button download ini jgua digunakan oleh chayaeducation, karena buatan admin, jadii jarang yang menggunakan dan pastinya okee. Nahh untuk itu, mari simak saja apa apa yang harus dilakukan..


Cara Membuat Button Download Dan Demo Animated CSS

Tahap Pertama : 
1. Login ke Blogger
2. Lihat Tab Tema > Edit HTML 
3. Masukkan CSS dibawah ini, Tepat diatas 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: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.orange,input.button.orange{background-color:rgba(250,111,87,1)}
.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.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}
.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.pink,input.button.pink{background-color:rgba(234,137,191,1)}
.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.dark-grey:hover,input.button.dark-grey:hover{background-color:rgba(84,87,102,0.9)}
.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.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.orange,input.transparent.button.orange{border:2px solid rgba(250,111,87,1);color:rgba(250,111,87,1)!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.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.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.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.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,input.transparent.button.white{border:2px solid rgba(255,255,255,1);color:rgba(255,255,255,1)!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.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}
.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}

SIMPAN TEMPLATE

PENGGUNAAN BUTTON STYLE 1 

1. Buat Postingan > Mode HTML >
2. Masukkan Kode HTML dibawah ini Untuk Membuat Postingan (Sesuaikan Warna yang diinginkan)

<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 blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>


BUTTON STYLE 2  

1. Buat Postingan > Mode HTML >
2. Masukkan Kode HTML dibawah ini Untuk Membuat Postingan (Sesuaikan Warna yang diinginkan)

<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
Gimana sobat, Mudah bukan? Terima kasih sobat, semoga bisa bermanfaat ya, jangan lupa tinggalkan komentar dibawah ini, jika ada masalah, tinggalkan komentar ya+_+
Baca Juga ×
Show comments
Hide comments

No comments

Powered by Blogger.