How to Code an Email Button: Blog Tips 101

Adding an email button

to your blog or website

requires a little different

coding from the other

social media icons.

Thousands of you have enjoyed my
"How to add Social Media Icon Buttons"
tutorial and are downloading my

Free Social Media Icons 
in fun colors.

Two great questions 
have popped up from the original tutorial:


How do I resize a button?
How do I code an email button?

So let's grab your email icon and 
learn three simple lines of code in this

Email Button Coding Tutorial

First of all, you might want your email button
embedded in your About or Contact page
and also included with your other social media 
icons on your sidebar in a widget.

To embed it in a page, upload the button
like any other photo, and add only the code between the quote marks as
specified in Step #1 below. Done!

To include it in the widget, here is an
example of what it the finished coding 
will look like:

NOW.
Here are the details:

Your lines of code always begin with

and close with 

between the first pair of

 you will type

a href = "mailto: youremailaddress@service.com"

That will command the computer to 
autofill in your email address when 
your guest clicks the email button.
{So make sure you type 
YOUR Actual email address 
after the mailto: !}

Between the second pair of 

you will type:

 img src = "alongstringofnumbersindicatingyourbutton" /



Between the quotation marks you will paste in
the image address where your 
your cute little email button lives.

if you're not sure how to do that, 
check out the original Blog Button Tutorial.

Between the last pair of

simply type:
/a

Done!

Be sure to grab your free email and
Social Media Icon Buttons
~here~