How to Create a Custom Button to Promote Your Books, Your Shop, and More

Want to direct readers to your book’s Amazon listing, your online store, or your Patreon page? Achieve this with a custom call-to-action (CTA) button. Here’s a step-by-step tutorial on creating your own, using photo and graphic design maker PicMonkey.

---

Choose a fitting image to work with

If you have the WordPress.com Premium or Business plan, you can also use custom CSS to make a clickable button.

Note: You can experiment with PicMonkey for free, but need a membership or free trial in order to save and export your creations.

If you prefer, use Canva as an alternative — most of its features are free — and refer to this tutorial to acquaint yourself with its interface.

In our last how-to on creating a website logo, we used Canva. For this tutorial, let’s experiment with PicMonkey, another tool that’s easy to use.

If you’d like to follow along, think of something you’d like to promote — your new book or latest project, your Etsy shop, your Donate page — and select an image from your archives that you can use. We’ll use this image as a background, so pick something that’s not too busy or detailed. If you don’t have an image to use, select a simple or abstract photo from one of these recommended stock libraries, which have extensive collections of free-to-use, high-quality images.

---

Open the image in PicMonkey

Let’s say I’m a nature photographer, and I want to direct my visitors to my online shop of prints. I’ll use one of my photos from Antelope Canyon, a beautiful slot canyon in the American Southwest. First, I’ll go to PicMonkey and click Edit a Photo. (As you begin, you’ll be asked to log in or start a free trial, but you can dismiss these prompts for now and just get started.) Click Open new at the top left and find and open your background image.

Explore the left sidebar of the PicMonkey interface. In the default view (Basic Edits), you’ll see some of the most-used options like Crop, Rotate, and Exposure. Explore the other icons down the left to see what else is available, like Effects, Text, and Overlays.

---

Create your background image

Think about your site’s look and feel — how can you integrate this custom button into your overall visual brand?

When making your background image, don’t be afraid to experiment! If you make a mistake, undo your last action by clicking the left-curling arrow in the bottom toolbar. Since we plan to add text later, consider a simple and muted background. As a photographer selling my nature prints, I’d like my button to echo some of my best work that I’ve captured at national parks and outdoor sites around the world, as well as visually complement other elements on my website.

Going into the Effects panel, I’ll use the Dusk option to soften and warm the image. You can fine-tune any of the effects in this panel, playing with the Fade and various brush settings. Here, I’ve set Fade to 0%, which mutes the canvas more, and I make sure to click Apply to save my changes.

I’d like to soften the contrast in the lights and darks even more so the text will be easy to read, so I return to the Basic Edits panel and click on Exposure to access the Contrast settings. I set the Contrast to -25, which creates an even softer effect.

---

Add your button text

Confirm or refresh your theme’s fonts in My Site → Customize → Fonts. Browser extensions like WhatFont or Fontface Ninja also identify fonts on websites.

Now, let’s add some text! Click on the Tt icon to open the Text panel to view fonts. My current theme uses Libre Baskerville as one of its fonts, so I’ll use it for my button text for consistency.

You can use your own fonts in PicMonkey, too.

Once you’ve selected your font, click on Add text. A text box will appear on top of your image; type the text you’d like to display on the button. Consider a direct, succinct call to action that prompts your visitors: Visit My Shop, Donate Now, Pre-order My Book.

Use a tool like ColorZilla to check the color codes used on any website.

In the popup toolbar on the right, you can change the alignment, font color (use hex color codes to match your site’s palette), and more. You can also drag the box’s corners to adjust the font size.

---

Add other effects or finishing touches

Finally, I’d like my button to be shaped as a circle, so I open the Frames panel (by clicking the frame icon) and click on Shape Cutouts. I choose the circle option, which immediately changes the shape of my image. I’ve also ticked the box next to Transparent background, so the button will display on my site’s sidebar cleanly, with no white background surrounding it.

Once you’re satisfied with your custom image, click Export in the top menu. (This is the point where you’ll be asked to start a free seven-day trial or sign up for a PicMonkey membership.) And voilà! You’ve created a custom button.

---

Add this button image to your website

The final step is inserting this custom image into an Image Widget and displaying it on your website. Launch your Customizer by going to My Site → Customize → Widgets, then select the area where you’d like to display the button. Click on Add a Widget and type “image” in the search field to locate the Image Widget.

In the widget settings, you can add a title above the button (such as “Visit My Shop”) or leave it blank. Next, click Add Image and upload your new button image to your site’s Media Library. In the field under Link to, add the URL of the page to which you’d like to direct your visitors when they click on the button — it can be a page on your website or an external link (Amazon, Etsy, or Patreon, for example).

Don’t forget to save and publish your changes.

View your website to see your new custom button in action. Mouse over the image to confirm it’s clickable and it goes to the page you’ve specified. Success!

You can follow this process to make all types of custom clickable images, including more CTA buttons, banner-style images in posts and pages, and your own social icons. It’s a great way to direct site traffic to a specific place and to refine your visual brand.

---

Ready to take your site to the next level? Get advanced SEO, eCommerce, customization, and social media tools, enjoy unlimited access to premium themes, and much more with the WordPress.com Business or Premium plans.

Compare our plans