Google Play Button With CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/27/2017

Mungkin saja di antara sahabat Blogger ada yang berniat membuat blog share aplikasi android dengan link download menuju halaman Google Play. Tentu saja agar lebih bagus postingan tentang aplikasi android-nya, sebaiknya link download yang menuju Google Play menggunakan Google Play button.

Selain menggunakan gambar tombol Google Play yang sudah ada, tentu saja kita juga bisa membuat tombol Google Play menggunakan CSS.

Sebagai demonya, penampakan tombol Google Play seperti pada iframe JSFiddle di bawah ini.


Bagaimana, tertarik juga untuk menggunakannya?

Silahkan simpan CSS di bawah ini di atas kode head.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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:18px;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:fontfutura;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/AVvXsEjGAR-b4Pu1EDpM1k1DHcbfgjunLQZSmNpfisp8ApA1ALaQISL_omkfkE5Iyt5ui1MtvL_Birk-A4G9fzOLluS5VgxpbqQxSDH8HEpVrUa94OuVl9pjVp3hDZrTeXSENyO-7jTGeI_qVUIo/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>

Kemudian gunakan kode HTML di bawah ini untuk menampilkan logo di dalam postingan.

<a class="btn btn-google" href="#" title="Google Play">Google Play</a>

Selamat mencoba dan semoga bermanfaat.