Cara membuat tombol demo dan download ~ Selamat datang lagi di blog sederhana ini gan, dalam postingan kali ini saya ingin berbagi secuil tips nih untuk membantu dalam memperindah tampilan blog, hal ini saya asumsikan bukan merupakan sebuah tutorial ya. Karena berbagai elemen hanya saya ambil dari berbagai blog juga yang banyak bertebaran di internet.
Keperluan tombol atau button sering kali di butuhkan bagi para pelaku dunia blog, karena bukan hanya blog bertemakan download saja yang membutuhkan namun blog dengan niche apapun sejatinya sah-sah saja jika ingin menggunakan tag <button> untuk mempercantik tampilan blog. Penggunaan button pada umumnya untuk mengarahkan pengunjung kesebuah tautan, dalam hal ini yang mau saya bagikan adalah tombol-tombol yang umum kalian jumpai di blog download template.
Baca Juga
Perlu di perhatikan bahwa untuk mengaplikasikan css ini dibutuhkan Font Awesome, jadi tambahkan link css ini tepat di atas kode </head>.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' />
Style Tombol Demo & Download Pertama
Preview:.tombol2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.tombol2 ul{margin:0;padding:0}
.tombol2 li{display:inline;margin:5px;padding:0;list-style:none}
.tombol2 li a.dem2,.tombol2 li a.down2{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.tombol2 li a.down2{background:#3498db}
.tombol2 li a.dem2:hover,.tombol2 li a.down2:hover{background:#666}
.tombol2 li a.dem2:active,.tombol2 li a.down2:active{cursor:pointer}
.tombol2 li a.dem2:after,.tombol2 li a.down2:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.tombol2 li a.down2:after{content:'\f019'}
Pemasangan CSS seperti pada umumnya, bisa di template yaitu di atas kode </b:skin> atau di dalam postingan dengan di apit tag <style> .. css .. </style>
Untuk pemanggilan css tersebut atau pemasangannya dapat lihat kode HTML di bawah, ingat ! tempelkan di postingan mode HTML ya.
<div style="text-align: center;">
<ul class="tombol2">
<li><a class="dem2" href="http://catatan-pelupa.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="down2" href="http://catatan-pelupa.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Ganti http://catatan-pelupa.blogspot.com/ dengan tautan kalian.Tombol keren ini pasti sudah tau kan, yaps ini adalah salah satu karya dari blogger ternama yaitu arlina design.
Style Tombol Demo & Download Kedua
Preview:.tombol{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 0px solid rgba(0,0,0,0.1)}
.tombol ul{margin:0;padding:0}
.tombol li{display:inline;margin:5px;padding:0;list-style:none}
.tombol li a.dem,.tombol li a.down{position:relative;padding:14px 48px 14px 16px;background:#303030;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.tombol li a.down{background:#f44336}
.tombol li a.dem:hover{background:#f44336}
.tombol li a.down:hover{background:#202020}
.tombol li a.dem:active,.tombol li a.down:active{cursor:pointer}
.tombol li a.dem:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.tombol li a.down:after{content:'\f019';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.tombol li:hover a.dem:after,.tombol li:hover a.down:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}
Berikut kode HTML untuk pemanggilannya gaes.
<li><a class="dem" href="https://catatan-pelupa.blgospot.com" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="down" href="https://catatan-pelupa.blgospot.com" rel="nofollow" target="_blank">Download </a></li>
</ul>
<div class="clear"></div>
Ganti http://catatan-pelupa.blogspot.com/ dengan tautan kalian.Mohon maaf karena style button ini saya lupa dapat dari mana, jadi tidak bisa di cantumkan buatan siapa siapanya, maaf ya :).
Sekian postingan perihal bagaimana membuat tombol demo dan download keren dengan bantuan css, sampai jumpa di berbagai artikel lainnya.
0 Response to "Tombol Demo dan Download Keren Dengan Bantuan CSS"
Post a Comment