Link Button

A link that looks a bit like a button


View demo Open in new window
320 x 568
View code
<a class="gg-c-link-button" href="#">
<svg class="gg-c-link-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.12c.11-1.54-1.19-2.25-2.43-2.82a15.73 15.73 0 00-5.14-1.79.52.52 0 00-.48.22 8.67 8.67 0 00-2.67 3.45 3.56 3.56 0 00-2.93 0 2 2 0 00-.85 1.67 1.56 1.56 0 00-.4.15 2.06 2.06 0 00-.8 2.34h-.2a2.15 2.15 0 00-1.27 2.2 1.82 1.82 0 00-.71.82 1.57 1.57 0 00.14 1.77 3.94 3.94 0 001.29.87l-.28.46a.63.63 0 000 .3s0 .05-.06.09a2.36 2.36 0 00.55 2.47 13.25 13.25 0 002.39 1.52l-.21.37c-.46.67.63 1.3 1.08.64A23.33 23.33 0 009 17c.34-.81 1.32-4.19 2.66-4a.31.31 0 00.11.08c.73.32.05 2.36-.06 3.11a8.44 8.44 0 00-.07 1.88c-.23.7.77 1.27 1.1.56A15.28 15.28 0 0117 13.35c.45-.37.1-.94-.36-1 .08-.05.05 0 .11-.13l.05-.09c.25-.44.48-.89.72-1.34 1.91 4.12-2.44 7-2.77 11-.07.8 1.18.79 1.25 0 .24-2.57 2.39-4.55 3-7.08a6.36 6.36 0 00-.78-5.25c.51-1 1-2 1.58-2.94a.6.6 0 00.2-.4zm-12.65 0a3.64 3.64 0 011.35.18c-.23.47-.45.89-.67 1.29A10.29 10.29 0 006.74 7c-.14-.42.26-.79.61-.87zM5.91 8.07a3.81 3.81 0 011.49.6l-.74 1.21a2.43 2.43 0 00-1.12-.59c-.08-.43-.23-1.19.37-1.22zm0 2.81l.08.06c-.22.36-.43.72-.65 1.07a3.67 3.67 0 00-1.3-.57c-.04-1.06 1.31-1.22 1.89-.56zM3.2 13c.24-.79 1.1-.31 1.54 0l-.53.88C3.79 13.79 3 13.54 3.2 13zm12.57-1.52a.62.62 0 00.47.92l-.12.07A16.29 16.29 0 0013 15.75a10.7 10.7 0 01.31-1.24A2 2 0 0012.4 12h-.07a.5.5 0 01-.31-.11c-1.63-.29-2.4.93-3 2.27a46.42 46.42 0 01-2.17 4.63c-1-.58-2.87-1.16-2.35-2.55a.49.49 0 000-.2c1.24-2.08 2.54-4.2 3.81-6.3.69-1.22 1.37-2.42 2.07-3.63.55-1 1.26-2.75 2.21-3.32a11 11 0 013.05 1c.88.36 2.92.94 3.08 2.09z"/><path d="M15.23 5c-.31-.07-.6-.21-.91-.28a4.32 4.32 0 00-.88 0 .52.52 0 00-.39.25.52.52 0 00-.34.65.3.3 0 000 .1c.16.3.35.29.64.36a8.58 8.58 0 01.83.35 1.41 1.41 0 001.55-.26c.53-.55.04-1.04-.5-1.17z"/></svg>Bring your number
<svg class="gg-u-icon gg-u-icon--small gg-c-link-button__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.2 19.5c1.2-1.3 2.3-2.1 3.5-3.4.2-.3.4-.5.6-.7.7-.7 1.1-1.2 1.8-1.8l1.6-1.6-.6-.6c-2.4-2.1-4.4-4.7-6.7-7-.2-.2-.2-.5 0-.7.4-.7 1.1-1.3 1.8-1.8.2-.1.3 0 .5.1h.1c.6.2 1.1 1 1.6 1.5 1.3 1.3 2.6 2.7 4 4.1s2.7 2.5 3.9 3.9l.1.1c.2.2.2.5 0 .7-1.6 1.6-3.1 3.4-4.7 5S9.4 20.4 7.8 22c-.2.2-.5.2-.7 0l-1.9-1.9c-.2-.1-.2-.4 0-.6z"/></svg>
</a>