Website

How to Create a Button in WordPress in 2017

Hi, guys!

 

Today I am going to show you how to create a button in WordPress. Even if you don’t know any coding, don’t worry because it will be a simple procedure which will take you only 5 minutes of your time!

 

There are many ways to create buttons in WordPress and the simplest way is to instal a plugin. However, every time you instal a new plugin it will slow down your website’s speed. Therefore, in order to avoid that, I will show you in this post how to write a simple code that will generate your own button while using WordPress.

Now, don’t worry. I know that most of you are like me and don’t know any programming. However, I assure you that this is a very simple procedure and I will also provide you screenshots with the code, where to write your link in the code, where to write the code and how it will look in the end.

->This is an Example!!<-

Step 1) Go to a Post or Page in WordPress.

In order to begin, we have to go to the page or post where we want to insert the button and click on the Text tab.

 

 

 

This is the tab where you need to write the code in order for it to work.

 

Step 2) Understanding the code

 

Now in order to make it more simple, I suggest you to copy paste the code below in the Text tab.

<p style=”text-align: center;”><a class=”button” style=”-webkit-appearance: button; -moz-appearance: button; appearance: button; background-color: yellow; text-decoration: none; color: black;” href=”https://how-to-earn-extra-money-from-home.com/category/earn-money-online/”><strong>This is an Example!!</strong></a></p>

Once you pasted, make sure to read the rows below in order to see how you can customise the button based on your own will. Don’t worry. It looks pretty scary at first, but once you take 2-3 minutes to understand it, you will see that it is pretty easy.

General

<p -> P stands for Paragraph. It is the font of the text.

This is a paragraph text

This is an h5 ( heading 5) text

This is an h3 text

text-align: center-> this feature makes the text to be aligned on the centre of the screen.

Button Appearance

-webkit-appearance: button; + -moz-appearance: button; + appearance: button; + text-decoration: none; -> Give the appearance of a button. If you cut those out, it will look simply like a hyperlink text. You don’t want to mess with those.

Background Color

background-color: yellow-> This is the colour of the button. You can set it blue/green or whatever colour you want. Since there are hundreds of colours out there, the web dev decided to assign to each colour a code similar to #FFFFFFF. They always have a # in front followed by a mixture of 7 characters or numbers. Check this website here in order to get the colour you want: http://htmlcolorcodes.com/

Example:

1) background-color: blue;

->This is an Example!!<-

 

2) background-color: #6FF314;

->This is an Example!!<-

Make sure that in the case that you decide to exercise and rewrite the code to write COLOR and not COLOUR. It won’t work.

Text Colour

color: black; -> this section of the code gives you the colour of the text. It uses the same principles as the background-color.

If you want your text to be yellow, you write yellow instead of black. And if you want a mixture of colours, you have to visit http://htmlcolorcodes.com/ and choose the colour that you like.

Example:

1) color: orange;

->This is an Example!!<-

2) color: #CF4836;

->This is an Example!!<-

Linking to another page.

Now that we have a button, the main purpose of it is to press it and opening another page

As you might have seen, when you pressed any of the buttons above, they opened different pages of my website.

So how can you add your own page?

The key stays here:

href=”https://how-to-earn-extra-money-from-home.com/category/earn-money-online/”  In this code you need to replace my page with your own page. The simplest way to do that is to go on your website’s browser and copy paste the link in the code.

Now that you have replaced my page, you’ve might notice that when you press the button, it will open in the same page. How can you open in another tab?

 

You need to add this section to the code target=”_blank”

Therefore, if you add this section, it will look like:

<p style=”text-align: center;”><a class=”button” style=”-webkit-appearance: button; -moz-appearance: button; appearance: button; background-color: yellow; button-align: center; text-decoration: none; color: black;” href=”https://how-to-earn-extra-money-from-home.com/category/blog” target=”_blank”><strong>This is an Example!!</strong></a></p>

Notice that there is no semicolon(;) between the quotes that contain the website’s link and the target function.

 

How to write your own message

You can insert any message you want between the <strong> and </strong>. Actually, the <strong> feature is not a must. It just bolds the text. ( without bold, with bold)

Step 3) Switch between the Visual and the Text tab

Switch between those two tabs as much as you want. The Visual tab is like a live preview of the changes that you make to the code.

Step 4) Make sure to Update the post/page.

You are done! The last step you need to make is to assure that you updated your post or page. Once you updated, go to your website and test your button.

 

That’s pretty much all on how to create a button in WordPress. I hope you find it simple. If you have any questions, share them with me in the comment section below :D! Cheers!

 

Remember that sharing is caring ! ^_^

Leave a Reply

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