Make Download Button Like on Jalan Tikus - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Download Button Like on Jalan Tikus, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article HTML, Article Resource, Article Tutorial, Article Web, we write this you can understand. Well, happy reading.

Title : Make Download Button Like on Jalan Tikus
link : Make Download Button Like on Jalan Tikus

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/AVvXsEg8raXQGH-tnYa5yW_E90PLw93CLM4ZAc5Z2rQB1_VK8xVaD64ULlSOGcsfn-N1Hn6hzS5aiVuZj4vOiFYIE6J_0Dw6At2dzegeEpJ6HGj8HqJrfFzzXNURQ4RKFSWT6uQxVF-xYtS4VXtY/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

Thus articles Make Download Button Like on Jalan Tikus

that is all articles Make Download Button Like on Jalan Tikus This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Download Button Like on Jalan Tikus with the link address https://autopostingblogspot.blogspot.com/2016/09/make-download-button-like-on-jalan-tikus.html