I am very new to this platform and I feel like I am overlooking something obvious. What I want is an HTML button that will open the user's native email client with the To: field already filled in.
<form>
<button class="button-21" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37525a565e5b775f58435a565e5b1954585a">[email protected]</a>" type="submit"> Contact</button>
</form>
Below is the CSS code for styling the button:
.button-21 {
align-items: center;
appearance: none;
background-color: #3eb2fd;
background-image: linear-gradient(1deg, #4f58fd, #149bf3 99%);
background-size: calc(100% + 20px) calc(100% + 20px);
border-radius: 100px;
border-width: 0;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-family: CircularStd, sans-serif;
font-size: 1rem;
height: auto;
justify-content: center;
line-height: 1.5;
padding: 6px 20px;
position: relative;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, background-position 0.2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
.button-21:active,
.button-21:focus {
outline: none;
}
.button-21:hover {
background-position: -20px -20px;
}
.button-21:focus:not(:active) {
box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 0.125em;