Web siteniz veya blogunuz üzerinden ziyaretçilerinizin size doğrudan e-posta göndermesini sağlamak, kullanıcı etkileşimini artırmanın ve profesyonel bir iletişim kanalı kurmanın en pratik yoludur. Bu rehberde, tamamen özgün, modern ve kullanıcı dostu bir "Bana E-posta Gönder" butonunu HTML ve CSS kullanarak adım adım nasıl oluşturacağınızı öğreneceksiniz.
Adım Adım "Bana E-posta Gönder" Butonu Oluşturma
Ziyaretçiyi doğrudan e-posta istemcisine (Outlook, Gmail vb.) yönlendiren en temiz yöntem mailto: protokolünü kullanmaktır. Tasarımı şık hale getirmek için HTML yapısını CSS ile destekleyeceğiz.
1. Adım: HTML Altyapısını Hazırlama
Öncelikle butonun web sayfanızda görüneceği temel HTML kodunu eklememiz gerekiyor. Bu kod, tıklanabilir bir alan oluşturur ve hedef e-posta adresini belirler.
<div class="eposta-kapsayici">
<a href="mailto:ornekadiniz@gmail.com?subject=Web%20Sitenizden%20Mesaj%20Var" class="eposta-butonu">
✦ Bana E-posta Gönder
</a>
</div>
Not:
ornekadiniz@gmail.comkısmını kendi e-posta adresinizle değiştirmeyi unutmayın. Formata zarar vermemek adına ikon olarak metin karakteri (✦) kullanılmıştır.
2. Adım: CSS ile Görsel Tasarımı Özelleştirme
Butonun modern, fark edilir ve şık görünmesi için aşağıdaki CSS kodlarını sitenizin stil dosyasına (veya HTML içindeki <style> etiketlerinin arasına) ekleyin. Bu tasarım, minimalist ve modern bir duruş sergiler.
.eposta-kapsayici {
text-align: center;
margin: 20px 0;
}
.eposta-butonu {
display: inline-block;
padding: 12px 28px;
background-color: #1a1a1a;
color: #ffffff;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.eposta-butonu:hover {
background-color: #333333;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.eposta-butonu:active {
transform: translateY(0);
}
3. Adım: Kodları Blogunuza Entegre Etme
Blogger İçin: Blog paneline giriş yapın. Sol menüden Yerleşim seçeneğine tıklayın. Butonu eklemek istediğiniz alandaki Gadget Ekle yazısına basın ve açılan pencereden HTML/JavaScript'i seçerek yukarıdaki birleştirilmiş kodları yapıştırın.
WordPress veya Standart HTML Sayfaları İçin: Yazı editörünüzü "Metin" veya "HTML olarak düzenle" moduna alarak kodları doğrudan içeriğinize yerleştirebilirsiniz.
İletişim butonu, e-posta, html kodları
Konu ile İlgili 5 Adet Alternatif Başlık
Blogger İletişim Sayfası Oluşturma ve E-posta Yönlendirme Kodları
Web Siteleri İçin Kullanıcı Dostu Mailto Butonu Tasarımı
HTML ve CSS ile Modern İletişim Butonları Nasıl Yapılır?
Ziyaretçilerin Sizinle Doğrudan Bağlantı Kurmasını Sağlayacak Web Kodları
Blog Sitelerine E-posta Gönderme Bağlantısı Ekleme Rehberi
Konu ile İlgili 10 Adet Anahtar Kelime
html eposta kodu, mailto kullanımı, iletişim butonu yapımı, blogger iletişim kodu, web sitesi mail ekleme, css buton tasarımları, web geliştirme, eposta yönlendirme, modern web tasarım, site içi iletişim,