<div class="stage">
<h1>CSS App Store Badges</h1>
<p>
<a class="btn btn--ios" href="#">
<svg class="btn__icon btn__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="btn__text">Download on the</span>
<span class="btn__storename">App Store</span>
</a>
<a class="btn btn--mac" href="#">
<svg class="btn__icon btn__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="btn__text">Download on the</span>
<span class="btn__storename">Mac App Store</span>
</a>
<a class="btn btn--android" href="#">
<svg class="btn__icon btn__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="btn__text">Get it on</span>
<span class="btn__storename">Google Play</span>
</a>
<a class="btn btn--windows" href="#">
<svg class="btn__icon btn__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="btn__text">Download from</span>
<span class="btn__storename">Windows Store</span>
</a>
<a class="btn btn--amazon" href="#">
<svg class="btn__icon btn__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="btn__text">Available at</span>
<span class="btn__storename">Amazon</span>
</a>
</p>
<p>
<a class="btn btn--ios btn--small" href="#">
<svg class="btn__icon btn__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="btn__text">Download on the</span>
<span class="btn__storename">App Store</span>
</a>
<a class="btn btn--mac btn--small" href="#">
<svg class="btn__icon btn__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="btn__text">Download on the</span>
<span class="btn__storename">Mac App Store</span>
</a>
<a class="btn btn--android btn--small" href="#">
<svg class="btn__icon btn__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="btn__text">Get it on</span>
<span class="btn__storename">Google Play</span>
</a>
<a class="btn btn--windows btn--small" href="#">
<svg class="btn__icon btn__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="btn__text">Download from</span>
<span class="btn__storename">Windows Store</span>
</a>
<a class="btn btn--amazon btn--small" href="#">
<svg class="btn__icon btn__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="btn__text">Available at</span>
<span class="btn__storename">Amazon</span>
</a>
</p>
<p>
<a class="btn btn--ios btn--tiny" href="#">
<svg class="btn__icon btn__icon--apple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>
<span class="btn__text">Download on the</span>
<span class="btn__storename">App Store</span>
</a>
<a class="btn btn--android btn--tiny" href="#">
<svg class="btn__icon btn__icon--google" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M4.942627,18.0508423l7.6660156-4.3273926l-1.6452026-1.8234253L4.942627,18.0508423z M2.1422119,2.1231079
C2.0543823,2.281311,2,2.4631958,2,2.664917v15.1259766c0,0.2799683,0.1046143,0.5202026,0.2631226,0.710144l7.6265259-7.7912598
L2.1422119,2.1231079z M17.4795532,9.4819336l-2.6724854-1.508606l-2.72229,2.7811279l1.9516602,2.1630249l3.4431152-1.9436035
C17.7927856,10.8155518,17.9656372,10.5287476,18,10.2279053C17.9656372,9.927063,17.7927856,9.6402588,17.4795532,9.4819336z
M13.3649292,7.1592407L4.1452026,1.954834l6.8656616,7.609314L13.3649292,7.1592407z"/>
</svg>
<span class="btn__text">Get it on</span>
<span class="btn__storename">Google Play</span>
</a>
<a class="btn btn--windows btn--tiny" href="#">
<svg class="btn__icon btn__icon--windows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M9.5,3.2410278V9.5H18V2L9.5,3.2410278z M2,9.5h6.5V3.3870239L2,4.3359985V9.5z M9.5,16.7589722L18,18v-7.5H9.5V16.7589722z
M2,15.6640015l6.5,0.9489746V10.5H2V15.6640015z"/>
</svg>
<span class="btn__text">Download from</span>
<span class="btn__storename">Windows Store</span>
</a>
<a class="btn btn--amazon btn--tiny" href="#">
<svg class="btn__icon btn__icon--amazon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
viewBox="0 0 20 20">
<path d="M18.736,18.101 C18.635,18.200 18.468,18.264 18.326,18.276 C18.054,18.299 17.861,18.039 17.944,17.769 C18.076,17.339 18.240,16.920 18.371,16.491 C18.444,16.251 18.484,16.000 18.532,15.753 C18.561,15.601 18.513,15.488 18.341,15.489 C17.915,15.493 17.489,15.494 17.063,15.517 C16.791,15.532 16.520,15.587 16.249,15.616 C16.057,15.637 15.905,15.566 15.825,15.378 C15.741,15.180 15.801,14.991 15.958,14.885 C16.245,14.690 16.547,14.509 16.863,14.368 C17.367,14.144 17.912,14.124 18.460,14.078 C18.802,14.130 19.149,14.161 19.485,14.241 C19.858,14.330 20.013,14.526 20.011,14.912 C20.004,16.147 19.619,17.233 18.736,18.101 ZM13.708,14.215 C13.443,14.441 13.176,14.431 12.911,14.205 C12.485,13.844 12.125,13.423 11.814,12.957 C11.743,12.851 11.665,12.750 11.581,12.636 C11.357,12.846 11.152,13.041 10.945,13.234 C9.990,14.123 8.847,14.475 7.576,14.481 C6.962,14.484 6.360,14.436 5.784,14.203 C4.751,13.784 4.072,13.024 3.770,11.935 C3.500,10.966 3.512,9.986 3.817,9.026 C4.181,7.884 4.936,7.086 5.982,6.561 C6.844,6.129 7.760,5.894 8.707,5.777 C9.450,5.685 10.195,5.613 10.939,5.535 C11.033,5.526 11.118,5.524 11.113,5.395 C11.095,4.938 11.107,4.477 11.053,4.024 C10.958,3.239 10.481,2.789 9.737,2.657 C8.933,2.512 8.216,2.730 7.673,3.369 C7.491,3.582 7.374,3.870 7.284,4.143 C7.141,4.577 7.011,4.675 6.568,4.615 C5.867,4.520 5.163,4.438 4.460,4.355 C4.131,4.316 3.974,4.128 4.030,3.832 C4.367,2.057 5.430,0.932 7.069,0.366 C8.467,-0.166 10.694,0.012 10.988,0.066 C11.806,0.215 12.578,0.486 13.261,0.986 C14.075,1.583 14.496,2.413 14.585,3.414 C14.637,3.999 14.639,4.589 14.643,5.176 C14.650,6.580 14.659,7.984 14.640,9.387 C14.628,10.286 14.885,11.067 15.465,11.741 C15.543,11.832 15.619,11.932 15.673,12.040 C15.782,12.255 15.742,12.455 15.563,12.611 C14.946,13.147 14.329,13.684 13.708,14.215 ZM10.861,7.522 C10.408,7.566 9.951,7.572 9.504,7.650 C7.922,7.926 7.044,8.986 7.319,10.648 C7.492,11.695 8.386,12.229 9.372,11.897 C10.122,11.645 10.535,11.055 10.832,10.357 C11.106,9.714 11.106,9.027 11.114,8.343 C11.114,8.151 11.102,7.959 11.118,7.768 C11.134,7.561 11.046,7.504 10.861,7.522 ZM10.737,17.911 C12.819,17.705 14.803,17.139 16.723,16.309 C16.844,16.257 16.977,16.216 17.108,16.207 C17.388,16.185 17.604,16.332 17.694,16.577 C17.778,16.808 17.712,17.065 17.479,17.226 C17.008,17.550 16.537,17.882 16.039,18.159 C14.445,19.049 12.741,19.611 10.939,19.850 C10.390,19.923 9.835,19.955 9.283,20.007 C7.235,19.988 5.374,19.357 3.631,18.303 C2.410,17.564 1.303,16.669 0.227,15.730 C0.007,15.537 -0.045,15.275 0.086,15.075 C0.220,14.872 0.493,14.809 0.749,14.944 C1.241,15.206 1.726,15.482 2.217,15.747 C3.657,16.525 5.126,17.229 6.716,17.630 C8.041,17.965 9.378,18.045 10.737,17.911 Z" />
</svg>
<span class="btn__text">Available at</span>
<span class="btn__storename">Amazon</span>
</a>
</p>
</div>//
// Author: Matthias Kretschmann
// https://twitter.com/kremalicious
//
//
// Button Variables
//
$btn-background = #000
$btn-color = #fff
$btn-border = #ddd
$btn-background-hover = #111
$btn-color-hover = #fff
$btn-border-hover = #fff
$btn-width = 190px // defined as min-width
// San Francisco all the things
// http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
// https://gist.github.com/AndrewBarba/2c0f6612ceef30f5f55d
$badge-font = system, -apple-system, '.SFNSDisplay-Regular', 'San Francisco', 'Helvetica Neue', 'Lucida Grande', 'Arial', sans-serif
//
// Button Base
//
.btn
box-sizing: border-box
display: inline-block
text-align: left
white-space: nowrap
text-decoration: none
vertical-align: middle
touch-action: manipulation
cursor: pointer
user-select: none
border: 1px solid $btn-border
padding: 4px 8px
margin: 5px auto
border-radius: 4px
color: $btn-color
fill: $btn-color
background: $btn-background
line-height: 1em
//
// no specific width so button can grow
// for localization
//
min-width: $btn-width
height: 45px
transition: .2s ease-out
box-shadow: 0 1px 2px rgba($btn-background, 20%)
tap-highlight-color: rgba(0,0,0,0)
font-family: $btn-font
font-weight: 500
text-rendering: optimizeLegibility
//
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
//
font-smoothing: antialiased
osx-font-smoothing: grayscale
font-feature-settings: 'liga', 'kern'
&:hover
&:focus
background: $btn-background-hover
color: $btn-color-hover
fill: $btn-color-hover
border-color: $btn-border-hover
transform: scale(1.01) translate3d(0,-1px,0)
box-shadow: 0 4px 8px rgba($btn-background, 20%)
&:active
outline: 0
background: lighten($btn-background-hover, 15%)
transition: none
//
// Button Items
//
.btn__icon
.btn__text
.btn__storename
display: inline-block
vertical-align: top
.btn__icon
width: 30px
height: 30px
margin-right: 5px
margin-top: 2px
.btn__icon--amazon
// tweak visual weight in all button variants
// without affecting layout
transform: scale(.85)
.btn__text
letter-spacing: .08em
margin-top: -.1em
font-size: 10px
.btn__storename
display: block
margin-left: 38px
margin-top: -17px
font-size: 22px
letter-spacing: -.03em
//
// Size modifiers
//
.btn--small
padding: 2px 8px
min-width: ($btn-width / 1.6)
height: 24px
border-radius: 3px
.btn__icon
width: 16px
height: 16px
margin: 1px 2px 0 0
.btn__text
display: none
.btn__storename
font-size: 12px
display: inline-block
margin: 0
vertical-align: middle
.btn--tiny
padding: 3px
width: 22px
height: 22px
min-width: 0
border-radius: 3px
.btn__icon
width: 14px
height: 14px
margin: 0
.btn__text
.btn__storename
display: none
//
// -------------------------
//
// Just the stage setup
// stormtrooper-move-along.gif
//
html
body
background: #F4B350
width: 100%
height: 100%
body
box-sizing: border-box
padding: 0 10%
max-width: 100%
display: flex
align-items: center
justify-content: center
text-align: center
background-image: radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 80%)
.stage
> h1
margin-top: -5%
margin-bottom: 5%
font-family: Avenir, Trebuchet, 'Trebuchet MS', sans-serif
font-size: 7vw
font-weight: 400
color: darken(#F4B350, 35%)
@media (min-width: 50em)
font-size: 5vw
@font-face
font-family: "San Francisco"
font-weight: 500
src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2'),
url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff') format('woff'),
url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.ttf') format('truetype')
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.