132 views
CSS
1.playstore-button { 2 display: inline-flex; 3 align-items: center; 4 justify-content: center; 5 border: 2px solid #000; 6 border-radius: 9999px; 7 background-color: rgba(0, 0, 0, 1); 8 padding: 0.625rem 1.5rem; 9 text-align: center; 10 color: rgba(255, 255, 255, 1); 11 outline: 0; 12 transition: all .2s ease; 13} 14 15.playstore-button:hover { 16 background-color: transparent; 17 color: rgba(0, 0, 0, 1); 18} 19 20.icon { 21 height: 1.5rem; 22 width: 1.5rem; 23} 24 25.texts { 26 margin-left: 1rem; 27 display: flex; 28 flex-direction: column; 29 align-items: flex-start; 30 line-height: 1; 31} 32 33.text-1 { 34 margin-bottom: 0.25rem; 35 font-size: 0.75rem; 36 line-height: 1rem; 37} 38 39.text-2 { 40 font-weight: 600; 41}
HTML
1<a href="#" class="playstore-button"> 2 <svg viewBox="0 0 512 512" class="icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> 3 <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z"></path> 4 </svg> 5 <span class="texts"> 6 <span class="text-1">GET IT ON</span> 7 <span class="text-2">Google Play</span> 8 </span> 9</a>