Google Play Button With Css

Mungkin saja di antara sahabat Blogger ada yang berniat menciptakan blog share aplikasi android dengan link download menuju halaman Google Play. Tentu saja biar lebih anggun postingan perihal aplikasi android-nya, sebaiknya link download yang menuju Google Play memakai Google Play button.

Selain memakai gambar tombol Google Play yang sudah ada, tentu saja kita juga dapat menciptakan tombol Google Play memakai CSS.

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


Bagaimana, tertarik juga untuk menggunakannya?

Silahkan simpan CSS di bawah ini di atas isyarat 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/AVvXsEj233K1rL0G3uCRAo1CH5KOWT80ohq-i4yac-vRQKEdfA6byB9dKYfkd-Z_wtN39J2karRd8d_u4nKVi_UsGfxlgWf0PCD-M4cnM65O5BQkXUts4wKIYAE1CnD1VTcvsJRNsLpZyFYpucLY/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 isyarat HTML di bawah ini untuk menampilkan logo di dalam postingan.

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

Selamat mencoba dan semoga bermanfaat.
Sumber https://www.kompiajaib.com/

Share this post