Home » WordPress Tutorials » Customization » How to Create a Button in WordPress With a Plugin

How to Create a Button in WordPress With a Plugin

Customization

If you are anything like me, then you just adore a sharp and minimal web design. Trying to accommodate that preference into your WordPress website can turn out to be the bane of your life. Don‘t panic! I‘m here to help!

A huge part of your website‘s vision is the buttons included in the design. Even though they might seem like something insignificant in the big picture, they are actually one of the main graphic elements on the web. That‘s why they can turn your whole website‘s style upside down if done wrong.

The general way to create a button in WordPress is with shortcodes. I‘m not going to lie – it‘s time-consuming and annoying. There is, however, an easier solution – plugins. I‘ve tried a couple of plugins while trying to design my own buttons, but there was one that stood out – Button X.

Button X is an incredibly user-friendly plugin that provides easy and clean button designs that are extremely customizable. Here comes the best part: you can generally adjust every single detail of each button, thus making them as close to your personal style as possible.  Let‘s follow the creative process in the next 5 steps!

1. Download and activate the plugin. Here I assume that you‘ve already gone through the How to Add a Plugin tutorial and are aware of the steps to take when adding a plugin.

2. Go to Buttons. The Button X plugin will create a page in your Admin Panel. Hover over it and a dropdown menu will appear. Choose Buttons. Buttons

3. Add a new button. By clicking Add New you start creating your first button. You can name it and browse through the options.

Add a Button

4. Design your button. At this point , you’ve already seen the full options which you can adjust for your button. Go through them.

Design a Button

  • Link – First, choose the type of the link – pick the URL. Decide whether you want your button to send the users to a new window, or not. Finally, paste the link.
  • Primary Text – Type in the text that will show on your button. You can choose the font and the color of the text.
  • Background and Border – You can choose a color for both or leave one of them transparent. It’s a good idea to choose a different hover option as it will help the button stand out.
  • Layout – Choose the style and the shape.

5. Insert the button in a post or page. After you’ve designed your dream button, it’s time to copy the Short Code. This is the code that appears right above Publish on the right side of the page. After copying it, click Publish and move to the post or page where you want to include it.

Copy the Short Code

Now paste the Short Code in the Text Editor and watch the magic happen!

Click Preview and voilà! Your very own button is ready!

New Button

Was this post helpful?

i

Relevant tags:

Create your WordPress website today!

Connect

Editor’s picks:

Gutenberg Tutorial: How to Move Blocks in WordPress

What you need to know: The WordPress Block Editor allows you to move blocks up and down the document structure in order to rearrange the content contained within those blocks. The most popular way of moving blocks is by dragging a block from one position and dropping...

Gutenberg Tutorial: Deleting a Block in WordPress

What you need to know: You can delete a block in WordPress by selecting it and pressing the Delete key on your keyboard. Alternatively, you can press the three-dot button in the Contextual Toolbar to access the Remove block option. Lastly, it is also possible to...

Gutenberg Tutorial: Using Block Patterns in WordPress

What you need to know: A block pattern in WordPress is a group of two or more regular WordPress blocks. These blocks come in a sensible layout that you wouldn’t need to modify in most cases. Instead, you just need to add your own content to the block pattern. You can...

Gutenberg Tutorial: Using WordPress Reusable Blocks

What you need to know: Gutenberg features reusable blocks that allow you to quickly insert the same content with one click. You can mark any block or block pattern as reusable. You can find your reusable block collection in the WordPress Block Library. Have you ever...



Create your WordPress website today!


Start now