Mailto Link + SVG Icon
Apa itu mailto link? Mailto link atau disebut juga link send email adalah elemen interaktif yang berfungi untuk menavigasi atau mengarahkan tindakan klik pengguna menuju/membuka app mail client. Secara gamblang, link mailto berfungsi sebagai pemanggil aplikasi/program email client di sistem operasi.
Biasanya Link mailto digunakan untuk membuat widget atau tombol send email di website/blog, dengan menggunakan link mailto pengunjung blog tidak perlu meninggalkan halaman dan mengetikkan email anda secara manual untuk mengimkan feedback kepada anda (pemilik blog).Ketika elemen interaktif yaitu link mailto diklik, jendela akan membuka software/aplikasi e-mail client yang ada di sistem operasi pengguna misalnya windows mail, microsoft ouloock untuk versi dekstop atau gmail, yahoo dan app email clients lainnya untuk versi mobile. [ads id="ads1"]
Format HTML Link Mailto
Berikut ini adalah hyperlink mailto dalam format kode html.<a href="mailto:yourmail@gmail.com">Send Email</a>
Keluaran (Output)
Send Email Sekilas ini mungkin terlihat sama dengan link (anchor elemen) pada umumnya, yang membedakan link mailto adalah value pada attributehref alamat yang ditunjuk oleh hyperlink mailto tidak berbasis http atau https. Link Mailto + Icon Email SVG
<div class="mailto-link">
<a href="mailto:cordialblogger@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>Send Email</a>
</div>
CSS
<style type="text/css">
.mailto-link{
display:flex;
margin:10px 0;
}
.mailto-link a svg{
width:20px;
height:20px;
fill:#000;
margin-right:13px;
}
.mailto-link a{
padding:0;
display:flex;
color:#3367d6;
font-size:16px;
font-weight:bold;
align-items:center;
}
.mailto-link a:hover{
color:#fc4f08
}
.mailto-link a svg:hover{
fill:#fc4f08
}
</style>
Komentar
Posting Komentar