In this How-To tutorial, I show you the easy way how to make cool-looking blog buttons. So here we go, “How to Make Blog Button.”
1. Choose Right Colors for Your Button
Of course, you can pick whatever colors you want. It’s up to you to choose. But did you know that large enterprises carry out extensive researches to find shades that convert the best? People respond to different colors and shades differently, and some colors get more clicks than others. Google, for example, tested 50 different shades of blue for its call to action button:
Below you can see Amazon’s call to action button. You can bet that they too have tested different colors and shades to find out which one converts the best.
Of course, it depends on the overall design of a website but if these companies have already done their research you may trust them and use the same colors that they do. Only… How do you know what colors they use?
Here’s a quick tip how to find out.
2. Pick the Color Codes of Your Favorite Button
2.1. What do you need?
2.1.1. An image editor. If you don’t have it yet, I recommend downloading Paint.NET. It’s simple, fast and quite powerful image editor.
2.1.2. A snipping tool. Print Screen button on your keyboard does the job too, but a snipping tool is handier. If you don have it already, download it. Just google “download snipping tool” and you find one for your operating system. It’s very handy tool to capture a portion of your screen and save it as an image. I use it extensively.
2.2. Pick the Color Codes
On the computer, there are tens of millions of colors and shades. It’s not enough to tell that I want to use yellow or red or blue. There are tons of very similar shades of red, yellow and blue. To differentiate them, each shade has a unique code, called a hex code which starts with #-sign. #0000000 is black, and #FFFFFF is white. All other colors are between these two values.
For this example, let’s use Amazon’s call to action button. Go to Amazon.com and pick a random product. Once you have chosen it, Amazon shows you its yellow Call to Action button “Add to Cart” on the right side of the window. Using your snippet tool take a snapshot of it and save to your hard drive (I prefer .png file format).
1. Let’s say you want to make your Call to Action button with the same colors that Amazon uses. Open the image file in the Paint.NET image editor. You see a toolbar, color bar, and your image. Click the “More” button in the Color bar to see its advanced options.
Advanced options reveal you the values of RGB (red, green and blue) and Hexacode (Hex field) of the chosen color. Right now, it shows the code of black: #000000 (it does not show # sign, but usually hex code is written with the # sign). This Hex field is the place where you get the codes that you need.
2. Go to the main menu of the Paint.NET and zoom in the image so that it’s easier to pick the colors. You need three colors: 1 for lighter yellow (upper part of the button), darker yellow (lower part of the button) and the border color.
3. From the Paint.NET toolbar choose a Color Picker tool. How does this device work? Wherever on the image, you click, it picks the color of that pixel, its RGB values, and Hexacode. Try it out. Click somewhere on the image and you see the results in Colors bar.
4. Now move the tool to the lower part of the button and pick the color. You see that Primary color in the Color bar changes into yellow, and Hexacode changes too. Because the button uses a gradient style, moving smoothly from darker to lighter shades, your code might be different from mine. But the color is the same. In my case you see, the hexacode of the darker yellow is F0C14D. Write your code down.
5. Now take the tool and pick a light yellow color which is on the upper part of the button. Hex code changes again, and you want to write it down. In my case, it is F7DEA0.
6. Use the tool again to pick the color of the border. In my case it is AA8326. Write your hex code down.
Now you have three shades and three hex codes that you need to make your button:
- light yellow: #F7DEA0
- dark yellow: #F0C14D
- Border: #AA8326
It’s enough right now, and you can start making a blog button.
3. Make Blog Button
1. Go to Da Button Factory website. That is a very simple web page, which helps you create and download your blog buttons. You see that there are three sections. Toolbars are on the left and the right. The button that you design locates in the middle. There are also links to download your button images.
3.1. Left Side Toolbar
2. Type your text that you want to see on your button.
3. Choose font type and size. Also, choose if you want it to be in bold or italic, pick the color of the text and its shadow. You may leave all the fields with default values, except the text that you have to type.
4. The second window is about the file format. Choose what file format you want your button image to be. You can leave it as a default value.
3.2. Right side Toolbar
5. Style – here you can choose if you want your button to be a rectangular, rounded or round box. In the case of a rounded box, you can also choose corner radius.
6. Background lets you choose the background style (unicolored, two colors, gradient or pyramid). Leave it gradient.
7. Top color – this is the place where you enter the previously picked hex code. Click on the rectangle with light blue color. At the bottom, you see the field that has #-sign. Replace the existing hex code with the code of light yellow that you found earlier. (only without #-sign). In my case, it was F7DEA0. Press OK.
8. Bottom color – Do the same with Bottom color.
9. Border color – To change the border color check the Border color box and then you can change the hexacode of the border color.
3.3. Download your button
Congratulation! Your button is done and ready to be downloaded. As you see, it has the same colors as an Amazon’s original call to action button. Only the text has a different style but if you want you can make it similar too. If you want to do some changes, just play with all the parameters on the left and right.
10. If you are happy with your button, just hit download link and download it.
What other ways do you know to make cool blog buttons?