Make Download Button Like on Jalan Tikus

Sebagai bloglang blogger petualang tak sengaja menclok di Arlina Design! Salah satu blog keren menceritakan banyak artikel mantab seputaran blogspot. Sobat harus cekidot postingan yang satu ini membuat recent post by label dengan fungsi tab. Template-template simpel dan indah terlahir dari sana juga :D Template dengan nama G Vusion 2 yang sudah di pakai oleh seorang blogger yg beralamatkan optimasidroid.blogspot.com ternyata memiliki tampilan tombol download yang mirip dengan kepunyaan web jalantikus.com Tutorial sekarang akan bercerita bagaimana cara membuat tombol download seperti di web jalan tikus ;)

Berikut penampakannya

Jalan Tikus	Blog Optimasidroid

Beda-beda dikit lah bro :D

#lapakdownload {
width: 100%;
position: relative;
border: 1px solid #DDD;
border-radius: 5px;
display: inline-block;
background-color: rgba(f, f, f, 0.5);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin: 10px 0;
font-family: 'Roboto', Segoe UI, Segoe, Arial, Verdana, sans-serif;
}
.iconapp {
width: 16%;
float: left;
padding: 16px 0;
text-align: center;
}
.iconapp img {
width: 70px;
height: 70px;
}
.detaildownload {
width: 84%;
padding: 10px;
}
.title-wrapper {
width: 55%;
}
a.title-download {
color: #252525;
font-size: 20px;
text-decoration: none;
font-weight: 900;
}
a.title-download:hover {
text-decoration: underline;
}
.versi-app {
color: #999;
font-weight: 300;
font-size: 20px;
text-decoration: none;
}
.detail-dev {
width: 55%;
margin-top: 6px;
display: inline-block;
}
.robotijo {
width: 20px;
height: 20px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gLIZ7wPw5w3UFdF3vY9B6Khpdja36Gf9OHs_yEYi7OfW66WYSnxLWXxbcddSJIfq3ZkHVrx9RMtQbPT5rBDGjWNwtL9HKvtByjdIFFuMvy2ZqHCQByVhqIym9j8QAb-jKRVn1rwuvpC1/h120/i-os-spr.png);
background-color: #6ab344;
background-size: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0);
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
a.text-dev {
color: #999;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
}
a.btn-download {
position: absolute;
top: 20px;
right: 20px;
height: 40px;
text-decoration: none;
line-height: 38px;
border-radius: 4px;
padding: 0 20px;
font-size: 15px;
background-color: #008EFA;
color: #fff;
font-weight: 900;
transition: 0.5s;
}
a.btn-download:hover {
background-color: #0B78E8;
color: #fff;
}
.source {
position: absolute;
bottom: 0;
right: 0;
padding: 2px 10px;
background: #F8F8F8;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
border-top-left-radius: 4px;
border-bottom-right-radius: 5px;
}
.introsource {
color: #999;
font-size: 11px;
line-height: 0;
font-weight: 400;
}
a.linksource {
font-size: 11px;
line-height: 18px;
text-decoration: none;
color: #999;
font-weight: 900;
transition: 0.5s;
}
a.linksource:hover {
text-decoration: underline;
}
@media only screen and (max-width: 768px) {
.detaildownload {
width: 80%;
}
.iconapp {
width: 20%;
}
}
@media only screen and (max-width: 480px) {
#lapakdownload {
width: 100%;
padding-bottom: 45px;
}
a.btn-download {
position: relative;
top: 8px;
right: 0;
padding: 8px 20px;
}
.source {
border-top-left-radius: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0 5px;
}
}
@media (max-width: 320px) {
.iconapp {
width: 100%;
}
.detaildownload {
width: 100%;
}
}

<div id="lapakdownload">
<div class="iconapp">
<img alt="" src="IMAGE-ICON-WEBSITE">
</div>
<div class="detaildownload">
<div class="title-wrapper">
<a class="title-download" href="ADDRESS-LINK.HTML">BLAH BLEH BLOH</a>
<span class="versi-app"></span>
</div>
<div class="detail-dev">
<i class="robotijo"></i>
<a class="text-dev">FVCK BY</a>
<a class="text-dev" href="ADDRESS-LINK-HOME">BLAH</a>
</div>
<a class="btn-download" href="ADDRESS-LINK-DOWNLOAD">Download</a>
</div>
<div class="source">
<span class="introsource">Download by </span>
<a class="linksource" href="ADDRESS-LINK-SOURCE">BLAH</a>
</div>
</div>

DEMO: codepen.io/beben-koben/pen/XjJrzY

Bonus:

Breadcrumbs - Gradiator - Responsive Tables: Grid Layout - Morphing faces with CSS - Bulletproof CSS only cross browser custom select - Fancy Animated Input Field - Jurassic Ipsum Generator in JS - Pure CSS Off-Canvas with Bootstrap - Color Palette Generator - Pure css popup box - PhotobloggR - a poto blogging template - Late-load animated gif and provide a pause button - Menu with mix-blend-mode buttons - yaBZRk - Colors Between - Animated gooey social SVG icons (pt 3) - notepadlet - Editing Images in CSS: Combining Techniques - Improve Call To Action With These 20 Code Snippets

Sii yuu :-h