Tuesday, July 12, 2011

Tech Talk for Non Techies - Building a HTML Button


Welcome to our Tech Talk for Non Techies mini-series.  Some of the most frequent questions that I receive from friends (both real and virtual in the handmade community) are about websites, blogs, photo editing, HTML and all things "nerd".  To help you on your way to better blogs, flashier Facebook, wicked websites and all that jazz, Tech Talk for Non Techies is a little mini-series here at Creativity Unmasked with "tech talk" for regular people, just like me.  Requests for post topics are (as with everything here at Creativity Unmasked) always welcome.  Today, we tackle HTML buttons.

Don't be scared, my friends.  Its just a harmless little button....right?  Right! Here is how to add a button to your blog using basic HTML code.

Where do buttons come from?  The starting point of any HTML button is the image.  The easiest way to create a button is to find a free image (make sure you check the terms of use!) on line or build your own, and then save your image somewhere accessible, like Picasa Web Albums.

Writing code?  Say it isn't so! Don't be so silly.  You can do this.  You are a smart and confident blogger, you have a great button picture ready to use and you are ready to tackle the HTML beast. Open your blog post/page composer or the HTML widget (wherever you want to place your button) and get ready for the easiest coding of your life. 
  • I am not a HTML guru by any stretch of the imagination, but it is really as simple as: <a href="URL"><img src="IMAGE URL"/></a> and there you have it!
  • Need to see a real example?  No problem.  The code behind this little button is as follows: <a href="http://creativityunmasked.blogspot.com/"><img src="http://rightclickcopyofyourimagelocation" /></a> Note that the red text is the image source and the green is the web link. 
  • Hehe...are you copying the code right now?  Don't worry - that is exactly why I posted it here.  :) Don't forget to change my website link for your own so that the button takes folks to your sites, not mine! ♥ 

Errr...Houston, we have a problem!  Here are a few of the most common questions and answers on basic buttons for blogs.
  • How do I center my button?  <center><a href="URL"><img src="IMAGE URL"/></a></center> 
  • How do I resize my button?  Well, you can resize the source image or your can add size details to your HTML code.  For example, this code will ensure the image is a 150x150 square.  <a href="URL"><img src="IMAGE URL" width="150" height="150"/></a> Be careful with non-square images, and adjust your width or height so the image isn't stretched or squashed. 
  • How do I add alternate image text to my button?  <a href="URL"><img src="IMAGE URL" alt="Whatever you want the alternate text to be"/></a>

Yes!!!  Go forth and button!  You can totally do this! :)


  1. Knowing this bit of code changes everything! I love personalising my blog's look using this simple but ubber helpful bit of code. Awesome to see it so well set out and easy to follow.

  2. I am so glad that you found it helpful. Thanks so much for your comment and the feedback. :)


Thanks ever so much for taking the time to leave us a comment - we read each and every one. We appreciate you taking the time to say hello and share your thoughts. We are all about sharing here at Creativity Unmasked so you are also welcome to give your own creative post/page a shout-out in your comment. :)