Skip to main content

Google Play Button With CSS

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB