I recently decided I was looking to add some buttons to my homepage. This allowing another menu option without having to scroll back to the top.
While I know some basic HTML I would say that my skills stop somewhere between blockquote tags and link tags. I can pound out a snazzy looking blockquote in my sleep, but links can occasionally drive me insane trying to figure out where I went wrong.
Last Thursday night, I asked a simple question which ended up leading to an impromptu call with Chuck Grimmett; who helped me work through it. We discovered that WordPress.com doesn’t accept the classic center tag, or the classic button tag.
However – WordPress.com does support creating buttons, as long as you do it in their preferred HTML. Depending on where you want your button located and how you want it to look, you may be able to get away with a fairly simple tag.
To create a simple button, you just need a link tag further designated with a class.
Just make sure to place the text you are trying to make a link in-between the start of your tag and your closing tag. With this code, you create a button that looks like this.
Pro Tip: When creating a link tag there is a much easier way! I just learned the difference between Absolute Links and Relative Links. If you are linking to content within your site, you can simplify your code by using a relative link.
Example:
Basic button talk aside, if you are looking to change the position of the button, left, center, or right aligned, you need to put the entire section of code in a style element. One style element is paragraph tags. You will, however, need to have to add a style rule. Like this,
Don’t forget to put your closing tags at the very end of everything you are applying this style too.
Lastly, if you are looking to remove the line from your linked text the last step is to add one last attribute to your code. Within the link tag we created earlier we need to declare what we want to see. In this case, I only wanted to see the letters, no underlines. I added a style attribute after the class in my tag this time telling HTML exactly what I wanted to see. Nothing.
My finished code looked something like this.
Overall, it was a lot easier than I thought it would have been, it just took a little trial and error!
