To create a working email hyperlink in HTML and CSS, you can use the <a> tag with a mailto: link. The mailto: protocol allows you to open the default email client when the link is clicked.
Basic HTML Email Link:
<a href="mailto:[email protected]">Send an Email</a>
Explanation:
- The
href="mailto:[email protected]"defines the email address to which the email will be sent. - When the user clicks on the link, their default email client will open with the “To” field pre-filled with the email address.
Additional Options:
You can also pre-fill the subject, body, and CC/BCC fields by adding query parameters to the mailto link.
- Pre-fill Subject:
<a href="mailto:[email protected]?subject=Hello%20There">Send an Email</a>
- Pre-fill Subject and Body:
<a href="mailto:[email protected]?subject=Hello%20There&body=This%20is%20the%20body%20of%20the%20email.">Send an Email</a>
- Pre-fill CC/BCC:
<a href="mailto:[email protected][email protected]&[email protected]&subject=Subject&body=Message">Send an Email</a>
CSS Styling:
You can style the email link just like any other link using CSS. Here is an example of styling the email link to make it look like a button:
<a href="mailto:[email protected]" class="email-link">Send an Email</a>
<style>
.email-link {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.email-link:hover {
background-color: #45a049;
}
</style>
Explanation of CSS:
padding: Adds space around the text to make it look like a button.background-color: Sets the background color of the link.color: Sets the text color to white.text-decoration: none: Removes the underline from the link.border-radius: Rounds the corners of the button.font-size: Sets the font size.:hover: Changes the background color when the link is hovered over.