Cara Membuat Button Animasi CSS

ButtonBAnimasi - Cara Membuat Button Animasi CSS

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

Button download ini jgua digunakan oleh chayaeducation, karena buatan admin, jadii jarang yg menggunakan dan pastinya okee. Nahh utk itu, mari simak saja apa apa yg 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 Utk Membuat Postingan (Sesuaikan Warna yg 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 Utk Membuat Postingan (Sesuaikan Warna yg 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+_+


Loading...

Tags: #animasi #Button #Cara #Membuat

author
Author: 
    Kabur Dari Ibu Tiri yg Kejam, Gadis 14 Thn Ini Malah Diperkosa 6 Pria Selama 2 Hari!
    slidegossip.com – Seorang gadis remaja malang menjadi korban pemerkosaan yg dilakukan oleh 6
    Bangkrut Gara-Gara Corona, Pengusaha Muda Ini Sewa Pembunuh Bayaran Demi Uang Asuransi!
    slidegossip.com – Seorang pengusaha muda nekat melakukan tindakan tak terduga. Berawal dr kondisi
    Aktor Tampan Ini Dituntut Karena Memperkosa 3 Wanita! Pengacara: Kami Yakin Dia Akan Dibebaskan!
    slidegossip.com – Aktor tampan asal Amerika, Danny Masterson dituntut atas tuduhan pemerkosaan yg
    ABG Ngaku Diperkosa Pria Tak Dikenal Saat Mabuk! Baru Lapor Polisi Setelah Hamil 6 Bulan!
    slidegossip.com – Alangkah baiknya utk selalu bersikap hati-hati terhadap orang tak dikenal. Jangan

    Leave a reply "Cara Membuat Button Animasi CSS"