Mozilla Protocol
  • 22.0.0

CTA Link: With Icons

You can add an icon to a cta-link as an inline image enclosed in a span with the class mzp-c-cta-link-icon-start if the icon appears before the text label or mzp-c-cta-link-icon-end if it appears after the label.

For best results, do not include any white space.

See the docs for buttons with icons for tips and support information.

<p>

    <a class="mzp-c-cta-link" href="https://www.example.com">CTA Link with Icon<span class="mzp-c-cta-link-icon-end">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="M1.02 5.85H.4l-.12.6a7.8 7.8 0 0 0 0 3.06l.12.61h.62c.68 0 1.3.36 1.64.94s.33 1.31 0 1.9l-.31.53.46.41c.78.69 1.67 1.21 2.64 1.54l.59.2.31-.54c.34-.59.96-.95 1.64-.95s1.31.37 1.65.97l.3.54.59-.2c.98-.33 1.87-.84 2.65-1.52l.47-.41-.32-.54c-.35-.59-.35-1.32-.01-1.91s1.03-.95 1.67-.94h.63l.12-.6c.1-.51.15-1.03.15-1.55s-.05-1.01-.15-1.51l-.12-.62h-.66c-.67 0-1.3-.36-1.64-.94-.34-.59-.34-1.33.02-1.92l.32-.54-.47-.41c-.78-.68-1.67-1.2-2.65-1.53l-.59-.2-.31.54c-.34.59-.97.96-1.64.96S6.69 1.45 6.36.86L6.05.32l-.59.2c-.98.33-1.87.85-2.65 1.53l-.46.41.31.53c.34.58.34 1.31 0 1.89s-.96.93-1.65.94zm2.94-.19c.49-.86.58-1.88.27-2.8.38-.28.78-.51 1.2-.7C6.07 2.9 7 3.34 8 3.34s1.93-.44 2.57-1.18q.63.285 1.2.69c-.33.93-.25 1.96.26 2.83.5.87 1.35 1.46 2.32 1.64.02.23.04.45.04.67 0 .24-.01.47-.04.7-.97.17-1.83.77-2.33 1.64-.5.86-.58 1.89-.26 2.82-.37.27-.78.5-1.2.69a3.39 3.39 0 0 0-2.58-1.19c-1 0-1.92.44-2.56 1.17a6.3 6.3 0 0 1-1.2-.7c.32-.92.23-1.95-.26-2.81a3.4 3.4 0 0 0-2.28-1.63c-.02-.23-.04-.46-.04-.69s.01-.47.04-.71c.96-.18 1.8-.77 2.3-1.63z" />
                <path fill="currentColor" d="M9.02 6.98H6.98v2.04h2.04z" />
            </svg>
        </span>
    </a>

</p>

<p>

    <a class="mzp-c-cta-link" href="https://www.example.com">
        <span class="mzp-c-cta-link-icon-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="M1.02 5.85H.4l-.12.6a7.8 7.8 0 0 0 0 3.06l.12.61h.62c.68 0 1.3.36 1.64.94s.33 1.31 0 1.9l-.31.53.46.41c.78.69 1.67 1.21 2.64 1.54l.59.2.31-.54c.34-.59.96-.95 1.64-.95s1.31.37 1.65.97l.3.54.59-.2c.98-.33 1.87-.84 2.65-1.52l.47-.41-.32-.54c-.35-.59-.35-1.32-.01-1.91s1.03-.95 1.67-.94h.63l.12-.6c.1-.51.15-1.03.15-1.55s-.05-1.01-.15-1.51l-.12-.62h-.66c-.67 0-1.3-.36-1.64-.94-.34-.59-.34-1.33.02-1.92l.32-.54-.47-.41c-.78-.68-1.67-1.2-2.65-1.53l-.59-.2-.31.54c-.34.59-.97.96-1.64.96S6.69 1.45 6.36.86L6.05.32l-.59.2c-.98.33-1.87.85-2.65 1.53l-.46.41.31.53c.34.58.34 1.31 0 1.89s-.96.93-1.65.94zm2.94-.19c.49-.86.58-1.88.27-2.8.38-.28.78-.51 1.2-.7C6.07 2.9 7 3.34 8 3.34s1.93-.44 2.57-1.18q.63.285 1.2.69c-.33.93-.25 1.96.26 2.83.5.87 1.35 1.46 2.32 1.64.02.23.04.45.04.67 0 .24-.01.47-.04.7-.97.17-1.83.77-2.33 1.64-.5.86-.58 1.89-.26 2.82-.37.27-.78.5-1.2.69a3.39 3.39 0 0 0-2.58-1.19c-1 0-1.92.44-2.56 1.17a6.3 6.3 0 0 1-1.2-.7c.32-.92.23-1.95-.26-2.81a3.4 3.4 0 0 0-2.28-1.63c-.02-.23-.04-.46-.04-.69s.01-.47.04-.71c.96-.18 1.8-.77 2.3-1.63z" />
                <path fill="currentColor" d="M9.02 6.98H6.98v2.04h2.04z" />
            </svg>
        </span>CTA Link with Icon</a>

</p>

<p>

    <a class="mzp-c-cta-link mzp-t-xl" href="https://www.example.com">CTA Link<span class="mzp-c-cta-link-icon-end">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <clipPath id="a">
                    <path d="M0 0h16v16H0z" />
                </clipPath>
                <g fill="currentColor" clip-path="url(#a)">
                    <path d="M7.25 0v10.21L3.53 6.49 2.47 7.55 8 13.08l5.53-5.53-1.06-1.06-3.72 3.72V0zM16 14.5H0V16h16z" />
                </g>
            </svg>
        </span>
    </a>

</p>

<p>

    <a class="mzp-c-cta-link mzp-t-lg" href="https://www.example.com">
        <span class="mzp-c-cta-link-icon-start">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
                <path d="M12 15H4c-1.1 0-2-.9-2-2V2c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2zM4 1.5c-.3 0-.5.2-.5.5v11c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V2c0-.3-.2-.5-.5-.5H4z" />
                <path d="M5.5 3.5h5V5h-5z" />
                <path d="M5.5 6.5h5V8h-5z" />
                <path d="M5.5 9.5h3V11h-3z" />
            </svg>
        </span>Try Reader Mode<span class="mzp-c-cta-link-icon-end">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z" />
            </svg>
        </span>
    </a>

</p>

<p>

    <a class="mzp-c-cta-link mzp-t-xs" href="https://www.example.com">
        <span class="mzp-c-cta-link-icon-start">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="M8.76 1.36 7.7.3 0 8l7.7 7.7 1.06-1.06-5.89-5.89H16v-1.5H2.87z" />
            </svg>
        </span>Previous</a>

    <a class="mzp-c-cta-link mzp-t-xs" href="https://www.example.com">Next<span class="mzp-c-cta-link-icon-end">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z" />
            </svg>
        </span>
    </a>

</p>

<p>

    <a class="mzp-c-cta-link" href="https://www.example.com">Character<span class="mzp-c-cta-link-icon-end">
            ❤︎
        </span>
    </a>

</p>

<p>

    <a class="mzp-c-cta-link" href="https://www.example.com">Emoji<span class="mzp-c-cta-link-icon-end">
            ❤️
        </span>
    </a>

</p>