HTML code for email button

ADVERTISEMENTS

See the beautiful email button shown below. You can add such images in your blog/website and link them to an email ID, so that users can email you directly by clicking that image. What works behind this image is an HTML code that triggers the default email client (Outlook, Thunderbird, etc.) in user’s computer. These email buttons are specially useful in static websites where it is impossible to add a server sided contact form.

2 HTML%2Bcode%2Bfor%2Bemail%2B%2Bbuttons%2BBlogger%2BWordpress HTML code for email button

Here is how you can initiate email me action using HTML.

1. Choose an email button of your choice. Search in Google, you will get a suitable one.

2. Now upload the image to any  image hosting website of your choice. Make sure that the uploaded image is not private. I am using imageshack.us as a reference here. After uploading, click on advanced linking option and get the direct image link code.

3. Open your HTML editor or blog dashboard and go to edit the specific layout or page elements. Select a suitable location and paste the code shown below.


 <a href="mailto:coloriteman@gmail.com">
<img src="http://img73.imageshack.us/img73/6152/emaillogoweb20rb0.jpg"/></a>

Insert you email ID just after the ” mailto:” section and direct link to the image in quotes after “src“.

The following is another way of linking an image in HTML.  Here when you click the linked image it opens the external URL added to the code.

<a href="http://www.techknowl.com" target="_blank"><img border="0" width="88" 
src="http://img294.imageshack.us/img294/9326/emailbutton2vl7.gif" height="26"/></a>

In this code you can specify the width, size and border of the uploaded image.

Related Articles

3 Responses to “HTML code for email button”

  1. hilda says:

    I followed your instructions and had a very hard time since there was no advance option after uploading my image and then eventually i was able to upload it but its huge, how do i control the size?

  2. Nemo says:

    I ended up using the directions given here, so thanks for the help!
    To control size, I used pixlr.com/ for online photo editing :)

  3. Andrea Sommers says:

    I just changed the email address and it worked. Thanks so much!

Leave a Reply

Tags:email button html ,click here to email me ,how to create a email button in html
Sunday 19th January 2014-Techknowl.com- Free software reviews, downloads and tech tips.