How do you make a button for a website in WordPress?

The actual question asked on a private Facebook group appeared thusly:

Need some help… looking to create a button in a blog. It’s been a very long time. I guess using HTML or no code? If I can get away without adding a plugin. Any suggestions.. thx

Subsequently, I made my snarky comment that the OP must surely have forgotten that he’s actually considered a friend so he must have lost my contact info. Answering the phone about 5 minutes later we got to the real point of the question. What OP wanted wasn’t really a button at all. What he wanted didn’t need to do anything – just have some text. If you already know that is pretty simple to accomplish and you can do it without reading ahead or Googling, this probably is not the article for you. However, if you need to make some text “pop” and stand out from the remainder of the page here are a couple of ways to accomplish this.

Supposing you on on the WordPress platform (self-hosted not .com) there are two primary methods. The first is to place all of your styling in the style.css file of your child theme. You do have a child them, correct? The reason you want a child theme is because it protects all of your customization from being over-written every time you update your theme. Then again perhaps you like doing the same thing over and again. But I digress. First let’s take a look at the sample “button” (which is actually a div element) the FBOP wanted:

HEY! Try this “button”!

Simple enough right? It will be in a moment. First, make a backup copy of your site and store it where you can get to it easily in case you need to restore it. Then, open your style.css file in Appearance -> Editor. If you are using a child them and it is active, you should land on exactly the file you want to edit. Now, somewhere just after the @import url(‘../child-theme/style.css’); line, type the following:

.myButton {
width: 400px;
border-radius: 10px;
padding: 5px;
text-align: center;
background-color: #ff3333;
color: black;
font-size: 2em;
}

Once you have typed that exactly as it is, don’t forget to click “Save File” below the editing window.

Next, in the post or page or text widget where you want your “button” to appear, type the following:

<div class="myButton">HEY! Try this "button"!</div>

Then click publish, save, or update and you have created a reusable, portable “button” to use anywhere on your WordPress website. The reason we do it this way is because if we use that same button style in other locations we can change the styling on the all from one location: the style.css file. Using the next method works if you only want to use the element in one location for one purpose. It is created using inline CSS and looks like this:

<div style="width: 400px; border-radius: 10px; padding: 5px; text-align: center; background-color: #ff3333; color: black; font-size: 2em;">HEY! Try this "button"!</div>

Either way you do it, the results on the page are the same. If you plan on using the element in multiple locations, you are highly advised to use the style.css in the child theme.

Let’s look at some more styling. What if I wanted to make the dev element really look more like a button? First of all, I can add and style borders. I can add a darker color border and style it to the “inset” to make it appear like this:

HEY! Try this “button”!

To accomplish this simply add the following to your inline or style sheet CSS:

border-style: inset;
border-size: 3px;
border-color: #ff0000;

Well isn’t that special? What if you wanted a “coupon” looking div? We could just change up the styling a bit to make it appear like this:

HEY! Try this “button”!

In this case all you need to do is change the border-style to dashed and the background color to a light yellow which in hexidecimal is #ffffcc. This would mean your border code would look like this:

border-style: dashed;
border-size: 3px;
border-color: #ffffcc;

Questions? Comments? Corrections? Set me straight about a few things? Do so below!