Cara Mudah Membuat Google Play Button With CSS
Cara Mudah Membuat Google Play Button With CSS - Biasanya, para Blogger yang membuat blog dengan niche download aplikasi Android membuat link...
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 16px 5px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAJPaAF2Wc-hlgk3o6xCoLclFA886nht4gI3sT03T70wzPAspDTfuRl5pQxpcZdykeN3U9eTfRerW_-gV6d_FERS3FA9MTl3_Vc-pgLtZE8hc5MrxJpbQhE3laJRPksujbKo_7QAn7GMb/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
/*]]>*/
</style>
</b:if>
<a class="btn btn-google" href="#" title="Google Play">Google Play</a>
Catatan :
/* CSS Menu Top */
#menu-wrapper {margin:0px 3px;background:#ececec;width:100%;max-width:900px;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:9px 10px 3px;border-bottom: 1px solid #eee;}
.top-menu {display:block;margin:0 auto;float:none;padding:0;width:100%;max-width:980px;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:Oswald;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#48d;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;font-size:15px}
.top-menu li.socialwrap a i{text-align:center;color:#666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#48d;color:#fff;}
.top-menu li.socialwrap.linkedin {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
#menu-wrapper {margin:0;width:100%}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#666;display:inline-block;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#48d;display:inline-block;position:absolute;right:15px;top:5%;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#48d;border:none;color:#fff;}
.top-menu ul li a:hover {background:#48d;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
#menu-wrapper {margin:0 auto;width:100%;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}
<div id='menu-wrapper'>
<div class='top-menu'>
<ul>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Contact us'>Contact</a></li>
<li><a href='#' title='Our Sitemap'>Sitemap</a></li>
<li><a href='#' title='Terms of Service'>Terms of Service</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap linkedin'><a href='#' rel='nofollow' target='_blank' title='Like us on Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank' title='Follow My Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank' title='Dont Forget to Subscribe'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank' title='Follow My Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank' title='Follow My Instagram'><i class='fa fa-instagram'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</div>
</div>
<div class='clear'/>
Catatan :
<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>
.post h3 {
border: 1px dashed #C7C7C7;
padding: 3px;
box-shadow: 2px 2px 5px;
padding-left: 10px;
margin-bottom: 7px;
border-radius: 10px;
border-bottom-color: #000;
background: rgba(218, 218, 218, 0.04);
border-bottom-right-radius: 100px;
}
.post h3 {
padding: 3px;
text-shadow: -2px -1px 1px #060606;
box-shadow: -3px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
background: #303030;
color: #F7F7F7;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f054';
font-size: 17px;
padding-right: 10px;
}
.post h3 {
padding: 3px;
text-shadow: -1px -1px 0px #000000;
box-shadow: -2px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f02d';
text-shadow: 0px 0px 0px #000;
color: #000;
font-size: 17px;
padding-right: 10px;
}
.post h3{
padding: 3px;
padding-left: 10px;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-color: #FEBD17;
border-radius: 9px;
box-shadow: 2px 2px 2px;
border: #000 1px solid;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f061';
font-size: 17px;
padding-right: 10px;
}
.post h3 {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wZiu_nFiLBdFcswJtaN3YcMOhqVKSgaQuc2FpX5ZTq-f2NfZ2IjeXa9VQ8OHw2fzDMPoQRxx-fhZgtd_TBb3iIUcv73HWCS8vsgQGVSczFnkNxLKW6QfagPQbV7vNXHtKHQFvD92O4DN/s1600/h2.jpg") repeat-x scroll 0px 0px;
color: #FFF;
font-size: 20px;
font-weight: 200;
letter-spacing: 0px;
font-family: fantasy;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 0px 1px 6px 3px #000;
padding: 10px 2px 10px 10px;
text-shadow: 0px 1px #000;
text-transform: uppercase;
}
.post h3{margin:0 0 10px;padding:10px;background-color:#00ABC5;box-shadow:0 3px 0 #4ACCDF;color:#FFF;font-size:16px;line-height:16px;font-family:"Bree Serif",serif;font-weight:400;text-decoration:none;text-transform:uppercase}
.post h3{background:#F9F9F9;font-family:'Oswald',sans-serif;font-size:120%;padding:6px 12px;color:#333;text-shadow:1px 1px 1px #AAA;border-bottom:4px solid #03DA03;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:1px 1px 2px #AAA;-moz-box-shadow:1px 1px 2px #AAA;box-shadow:1px 1px 2px #AAA;margin:6px 3px;text-transform:capitalize;width:95%;line-height:1em}
.post h3:hover{border-bottom:4px solid #003F80}
.post h3{color:#222;border-left:10px solid #222;border-right:10px solid #222;padding:3px 5px 3px 20px;border-radius:15px;-moz-border-radius:15px;box-shadow:0 0 13px #222;-webkit-box-shadow:0 0 13px #222;-moz-box-shadow:0 0 13px #222}
.post h3:hover{color:#219DFC;border-left:10px solid #219DFC;border-right:10px solid #219DFC;box-shadow:0 0 13px #219DFC;-webkit-box-shadow:0 0 13px #32A4FC;-moz-box-shadow:0 0 13px #32A4FC}
.post-body h3{padding:10px 0;color:#444;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;font-weight:700;margin:15px 0;font-size:22px}