In this section, we'll explore how to use mailto links or email links in Tailwind CSS. We'll cover creating mailto links, styling mailto link buttons, and adding icons to mailto link buttons for an enhanced user experience.
To create a styled mailto link in HTML with Tailwind CSS, use an <a> tag with a mailto: email address in the href attribute and apply Tailwind CSS classes for styling.
<a href="mailto:[email protected]" class="text-blue-500 hover:text-blue-700">
Send Email
</a>
tailwind mailto link
To transform an email link into a button-style appearance with Tailwind CSS, you can apply the appropriate CSS classes to style the link.
<a href="mailto:[email protected]" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Contact Us
</a>
tailwind button mailto link
A mailto link with an underline that disappears when hovered over.
<a href="mailto:[email protected]" class="text-green-600 underline hover:no-underline">
Email Information
</a>
mailto link
A Tailwind CSS button with an icon and a mailto link, along with an SVG envelope icon from Heroicons.
<a href="mailto:[email protected]"
class="bg-purple-600 hover:bg-purple-800 text-white py-2 px-4 rounded inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
<span>Email Us</span>
</a>
tailwind button icon mailto link
