Home Tutorials Custom buttons in your posts

Custom buttons in your posts

Tutorial level: basic HTML and CSS

User engagement is maybe the most important indicator of success for any WordPress news website or blog. Every one of us wants active users eager to spark the conversation online, not only providing comments on your content, but also help drive more visitors to your website.

Now, I’m sure your website looks amazing and your content is excellent, but what’s the secret ingredient to transform visitors into ‘ambassadors’ in the online environment? Well, a strong call to action message well placed – as close as the desired ‘trigger’- is a very good place to start.

In this article, we’ll show you in five easy steps how to add buttons inside your post content to give your users the opportunity to engage and interact with your content.

There is no limit to what kind of content you can add inside a button, so feel free to get creative with your Call to action.
The first step is to select the text you want to convert into a button and select the type of button style from the ‘shortcodes’ dropdown:

how to create it

Pick one of the six styles for your button:

2016-04-22_14-31-01

Now you will see this code line in the visual editor:

shrotcode

The information you’ll add between the quotation marks will define the style of your button. If the quotation marks are left without content, then the default values will be applied: the default color, the normal size, the default style, no target_blank and no URL.

As ‘practice makes perfect’, let’s get started on creating our content. I need a large “Read more” button with a red color and make it open in a new window.

Fill out the quotations with your desired content:

1.color=”” – The color section will only recognize a predefined color scheme. Choose the color name specified in this list for the button to detect the proper color:In order to set a red color we will add it like so: color=”danger”

culori

2. size=”” – The size section supports the following sizes:  mini, small, normal and large. To make it a large button just enter the code like this: size=”large”

3. type=”” – The type is set automatically by the style of button you choose from the shortcodes dropdown.

4. target=”” –  In the target section you set up the way you want the button link to behave. If your button will open the link in another tab of the browser just type _blank in this field: target=”_blank”

5. link=”” – The link section is where you should add your button destination URL. Example: link=”https://mycustomlink.com”

Now you’ll have a beautiful Call to action on your button.

buton final

Read_more_red_button

This is an easy way to boost the user’s engagement on your website. Colored and styled, the button will be your website’s signature. Enjoy growing your website!