347 views
CSSAdd prefixes
1.beach-button { 2 background-color: #fbc02d; 3 border: none; 4 border-radius: 5px; 5 color: #333; 6 cursor: pointer; 7 display: flex; 8 align-items: center; 9 font-size: 18px; 10 font-weight: bold; 11 padding: 10px 20px; 12 transition: all 0.3s ease; 13} 14 15.beach-button:hover { 16 background-color: #ffe082; 17} 18 19.beach-button svg { 20 height: 20px; 21 margin-right: 10px; 22 width: 20px; 23}
HTML
1<button class="beach-button"> 2 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 3 <path d="M12 1L2 21h20z" fill="#fff"></path> 4 <path d="M12 16.6l-4-4.2 1.4-1.4L12 13l6.6-6.6L18 9z" fill="#1565c0"></path> 5 <path d="M12 18h-.3c-3.8-.3-7-3.5-7.3-7.3H1.9c.4 4.5 4.2 8.2 8.8 8.7V22c1.6 0 3-1.3 3-3s-1.3-3-3-3z" fill="#00838f"></path> 6 <path d="M12 18c-.6 0-1.1-.1-1.6-.2-1.2-.4-2.2-1.4-2.6-2.6-.1-.5-.2-1-.2-1.6 0-.9.2-1.8.7-2.5l4.4 4.4-1.4 1.4-3-3v-4.2c.7-.4 1.6-.7 2.5-.7.6 0 1.1.1 1.6.2 1.2.4 2.2 1.4 2.6 2.6.1.5.2 1 .2 1.6 0 .9-.2 1.8-.7 2.5l-4.4-4.4 1.4-1.4 3 3v4.2c-.7.4-1.6.7-2.5.7z" fill="#00acc1"></path> 7 </svg> 8 <span>Download</span> 9</button>