Mailto links are used to create clickable links that, when clicked, open a user’s email client with a pre-populated email message. This is a convenient way to allow users to contact you or send feedback directly from your website. In this guide, we’ll show you how to create and style mailto links using CSS.
Creating Mailto Links
To create a mailto link, you need to use the “mailto” protocol in the href attribute of an anchor tag. Here’s an example:
<a href="mailto:example@example.com">Send email</a>
When a user clicks on this link, their default email client will open with a new message addressed to “example@example.com”.
Styling Mailto Links
To style mailto links, you can use CSS. Here’s an example:
<a href="mailto:example@example.com" class="mailto-link">Send email</a>
.mailto-link {
color: #fff;
background-color: #007bff;
border-radius: 5px;
padding: 10px 20px;
text-decoration: none;
}.mailto-link:hover {
background-color: #0069d9;
}
This code will create a blue button with rounded corners that changes to a darker shade of blue when the user hovers over it.
Advanced Mailto Link Features
There are several advanced features that you can use with mailto links. Here are a few examples:
- Add a subject line:
<a href="mailto:example@example.com?subject=Feedback">Send email</a>
This will open the user’s email client with a subject line pre-populated with “Feedback”.
- Add a body text:
<a href="mailto:example@example.com?body=Please%20send%20me%20more%20information.">Send email</a>
This will open the user’s email client with a pre-populated body text asking for more information.
- Add multiple recipients:
<a href="mailto:example1@example.com,example2@example.com">Send email</a>
This will open the user’s email client with two email addresses pre-populated in the “To” field.
Conclusion
Mailto links are a simple and effective way to allow users to contact you directly from your website. With CSS, you can style these links to match your website’s design and even add advanced features like subject lines and pre-populated body text.