How to Make My Own Contact Buttons

Adding a contact button to your site allows viewers to click and contact you directly by email.

Making your own contact buttons to display on your website is a relatively simple task. It may seem daunting, but you don't need much in the way of programming skills, just a simple photo-editing program, a background image and a photo-sharing site to host it.

Things You'll Need

• Computer
• Photo-editing software
• Free background image
• Photo-sharing site

Instructions

1. Browse through free Creative Commons licensed photos and backgrounds on sites like Flickr and Every Stock Photo. Download and save the image you want to use. Make sure the image you choose for your background is licensed for editing, distribution and commercial use by Creative Commons before you use it, otherwise, you could be asked to take the image down. You may also make a plain, colored background. Whatever you choose, make sure it matches your website motif.

2. Open your photo-editing software. Many PCs with Windows come with a basic program like Paint, wherein you can edit images, but the capabilities are limited. Having Photoshop gives you a wider range of options for editing your contact button.

3. Open the image you downloaded and saved to your computer, using the photo-editing program. Size the image reasonably. Contact buttons need to be big enough to catch the eye, but not overwhelming in size. 150 x 150 pixels is a reasonable size, but you can adjust it to fit your needs.

4. Choose a font from the menu that is easy to read. If you have a special theme on your site, you may download free fonts to match the theme. For example, if you're a horror writer, a font like "Bloodgutter" adds atmosphere to your contact button without obscuring the readability of the font. Download free fonts from a number of websites, such as 1001 Fonts and SimplytheBest. Many fonts come in a zip file. Unzip the file and upload it to your computer from the control panel.

5. Center the chosen font over the button and type the word "Contact." Add any filters and effects from the photo software menu that enhance the appearance of the button. You may want to sharpen the text or add an outer glow to make it stand out against the background.

6. Save the button in your files under a name you'll be able to easily locate later, then browse online for free photo-sharing sites. You might use Flickr or Photobucket, for example, to host your site. If your own website offers you space to host files, you may also upload the image directly to your site.

7. Locate a good place on your website to add the contact button. Make sure you choose a place where people will be able to find it, such as your "About Me" page, or even a contact information page. Capture the URL of the image after it's hosted and save it in Notepad until you're ready to use it.

8. Use a simple html code to link the contact button directly to your email. That code looks like this: < p >< a href="mailto:[e-mail]" >< img src="image.url.jpg" width="150" height="150" border="0" >< /a >< /p >. Make sure to insert the proper URL and email into the html and close the carrots, which are left open here to demonstrate the code.

9. Preview the button on your site to make sure it looks the way you want it to. Test the email function by clicking on the preview. Save the page, and wait for those contacts to start flooding your inbox.

References

• Pow Web Forums
• Pega Web

Resources

• Every Stock Photo
• Flickr
• 1001 Free Fonts