Cara Membuat Button Animasi CSS
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
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>
0 Response to "Cara Membuat Button Animasi CSS"
Post a Comment