Download On The App Store Badge With CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/30/2017

Sebelumnya saya sudah membuat Google Play Button With CSS, dan kini saya akan membagikan cara membuat Download On The App Store Badge With CSS.

Ini berguna 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/AVvXsEjqkPCSAbtfxMEYvo6hq97JuJFY_FYioXHArc5x0URCzVGrLXJxBul3P1oZAEyfG2rphjcGeCjYZ7MfLALLIGSQlL8PSitOY5aDdsc_1KiQcvhxAUYoI84SLsmg7EBEYL6ZktffM0yjaLM/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 kode berikut di dalam postingan (mode HTML) untuk menampilkan App Store Badge.

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

Nah jika ingin menggabungkannya dengan Google Play button, gunakan CSS berikut (hapus kode 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/AVvXsEjGAR-b4Pu1EDpM1k1DHcbfgjunLQZSmNpfisp8ApA1ALaQISL_omkfkE5Iyt5ui1MtvL_Birk-A4G9fzOLluS5VgxpbqQxSDH8HEpVrUa94OuVl9pjVp3hDZrTeXSENyO-7jTGeI_qVUIo/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/AVvXsEjqkPCSAbtfxMEYvo6hq97JuJFY_FYioXHArc5x0URCzVGrLXJxBul3P1oZAEyfG2rphjcGeCjYZ7MfLALLIGSQlL8PSitOY5aDdsc_1KiQcvhxAUYoI84SLsmg7EBEYL6ZktffM0yjaLM/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 kode 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">App Store</a>



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

Dan penampakannya seperti berikut: