<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%)
    -webkit-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
    //
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    -moz-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')
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.