Katelyn Brooke

How to Scale a Button

tips and tutorials

17 Jan

Yesterday I got my blog all set up to do button swaps (I am no longer swapping.)  I was emailing back and forth with one of my fellow blog designer friends, and it occurred to us that maybe most people don’t know how to scale images using HTML.  I certainly had no clue until a few weeks ago.  I thought I would do a little diagram for you to show you how it works.

Let’s back up a little bit.  A blog button is a little image that is designed to lead people to your blog.  It usually has your blog title, and the code links it to your blog, so that if someone clicks on the image they will be directed to your blog.  A lot of times bloggers will display their button and then use code to make a little text box underneath so that readers can copy the code into an HTML/JavaScript Gadget on Blogger or a Text widget on WordPress, and then have a link to your blog on their site.  Bottom line: blog buttons are little ads that help you get more readers.

The problem is that sometimes the sidebar width and the button size don’t always match up.  These days people are making their blogs really wide, which gives them wide sidebars.  Blog buttons used to pretty much always be 125 pixels by 125 pixels.  Now more and more people are making bigger buttons to accommodate bigger sidebars.  By learning just a little bit of HTML code you can format any button to fit in your sidebar.

The screen captures I chose were for code that makes a grab button and the text box below so that people can put the button on their blog.  If you are just editing the code for a button, just pay attention to the top part of the code, and feel free to ignore the text box part.

Blogger HTML Button TutorialWordpress HTML Button Tutorial

The process for Blogger and WordPress is the same, but I thought I would show both so that you could use the one that looks familiar.  All you need to do is make sure that the code for the button has the height and width listed somewhere after the “img src=”www.hlk.sdf/” but before the />.  Specifying height and width isn’t necessary for the button to function, so if the code doesn’t include that, go ahead and type it in just as you see it above.  Then all you have to do is make sure that the numbers are the correct size.  Make sure that if you are scaling a button that isn’t a square that you scale it to the nearest pixel (I usually use proportions and real math like I learned in middle school… who would have thought!)  Once you do that, you’ll be all set!

Here’s the catch: if you are scaling a button to be significantly larger than the original file size, it will become blurry.  But I think it’s usually worth a try!

2 Comments

« banana cream pie
Theater »

Comments

  1. Emily Hope says

    January 17, 2012 at 11:19 pm

    YES!!!! this is so helpful – thank you. I managed to scale the buttons on my sidebar and it looks 100 times neater. I’ve already got a few hits from your blog too – thanks again for taking and displaying my button.

    Reply
    • Kate says

      January 18, 2012 at 12:08 am

      I’m so glad!  Thanks for swapping with me!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Connect

  • Bloglovin
  • Instagram
  • Pinterest
  • Twitter

Topics

design work
sketchbooks
moodboards
tips and tutorials
starred this week
monthly recaps

Pinterest

12 months ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 
gluten free carrot cake recipe

gluten free carrot cake recipe

1 year ago
gluten free carrot cake recipe
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

Disclosure

There are some affiliate links on my site, which means that if you purchase something through the links, I may earn a commission. This is at no cost to you, and rest assured that I only recommend products that I use myself. Thanks again for visiting my blog!

This error message is only visible to WordPress admins

Error: No feed found.

Please go to the Instagram Feed settings page to create a feed.

Copyright © 2023 · Built on the Refined Pro Theme