Download On The App Store Badge With Css

Sebelumnya aku sudah menciptakan Google Play Button With CSS, dan sekarang aku akan membagikan cara menciptakan Download On The App Store Badge With CSS.

Ini berkhasiat untuk Anda yang membagikan postingan untuk aplikasi smartphone dengan link undah ke App Store.

Sebagai demonya silahkan lihat penampakannya pada JSFiddle berikut ini:


Bagi yang tertarik untuk menggunakannya silahkan gunakan CSS berikut:

 @font-face{font-family:"Product Sans";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
 a.btn-apple{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-apple{color:#fff;background-color:#111;border-color:#000;padding:15px 22px 5px 50px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
 .btn-apple:focus{color:#fff;background-color:#555;border-color:#000}
 .btn-apple:active,.btn-apple:hover{color:#fff;background-color:#555;border-color:#000;}
 .btn-apple:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCWwlnCu5d-h_in1QDSFyUZCih2XRKWx4juAn7g8W5_jK6Wf0L0sjfxw4knnKa-_pzxx4RHUjqasTH6_rC3X8lsR2YxTIiBODqT29spl_yXId1BPKZRkEjyr3uUyBWFtYnpIgkHAPWWY/s30/apple.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:10px;top:50%;margin-top:-15px}
 .btn-apple:after{content:"Download on the";position:absolute;top:5px;left:50px;font-size:11px;font-weight:400}

Kemudian silahkan gunakan aba-aba berikut di dalam postingan (mode HTML) untuk menampilkan App Store Badge.

 <a class="btn btn-apple" href="#" title="Download On The App Store Badge With CSS">App Store</a>

Nah bila ingin menggabungkannya dengan Google Play button, gunakan CSS berikut (hapus aba-aba CSS Google Play yang sebelumnya Anda pasang).

 @font-face{font-family:"Product Sans";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
 a.btn-google,a.btn-apple,a.btn-google:hover,a.btn-apple:hover{color:#fff}
 .btn{display:inline-block;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}
 .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,.btn-apple{color:#fff;background-color:#111;border-color:#000;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
 .btn-google{padding:15px 16px 5px 40px;}
 .btn-apple{padding:15px 22px 5px 50px;}
 .btn-google:focus,.btn-apple:focus{color:#fff;background-color:#555;border-color:#000}
 .btn-google:active,.btn-google:hover,.btn-apple:active,.btn-apple:hover{color:#fff;background-color:#555;border-color:#000;}
 .btn-apple:before,.btn-google:before{background-size:cover;background-repeat:no-repeat;width:30px;height:30px;margin-top:-15px;position:absolute}
 .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);left:6px;top:50%}
 .btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
 .btn-apple:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCWwlnCu5d-h_in1QDSFyUZCih2XRKWx4juAn7g8W5_jK6Wf0L0sjfxw4knnKa-_pzxx4RHUjqasTH6_rC3X8lsR2YxTIiBODqT29spl_yXId1BPKZRkEjyr3uUyBWFtYnpIgkHAPWWY/s30/apple.png);left:10px;top:50%}
 .btn-apple:after{content:"Download on the";position:absolute;top:5px;left:50px;font-size:11px;font-weight:400}

Dan gunakan aba-aba berikut di dalam postingan (mode HTML) untuk menampilkan App Store Badge dan Google Play badge.

 <a class="btn btn-apple" href="#" title="Download On The App Store Badge With CSS">App Store</a>
 
 <a class="btn btn-google" href="#" title="Download On The App Store Badge With CSS">Google Play</a>

Dan penampakannya menyerupai berikut:



Sumber https://www.kompiajaib.com/

Share this post