I’ve been doing some updates to my blog and website and one of the things I was updating was my buttons. Sometimes I rely too heavily on my theme and have to look back on how to create a button that will link to another page. So I thought I’d quickly cover 2 kinds of buttons that are helpful when using WordPress or your own website.
The first kind of button you can use to create a link is an HTML button. It’s kind of misnomer, because the button is actually a bit like a form. It acts similarly to a form because an action is tied to it and needs to do something once clicked. In my case, go to my Portfolio page. This is the code I used to create my button, which you can see on any of the bottom of my portfolio items.
Note: If you copy this code above, change my link to your own. Here’s a bare version:
<form><button formaction=”#”>Name of Page</button></form>
Replace the # with your website link and replace “Name of Page” with the name you want to call the link. In my case, it looks like this:
Of course, if you have a style sheet with your website as most do, it will inherit qualities from the sheet. So all your buttons tend to look as styled in the sheet. It’s not in the scope of this post to go over that.
Quick Tip: Go to the page you published your button on, right click on the button and then select from the menu “inspect”. Go into the CSS or Style area and play around with the colors and code. Once you have it how you like it, you can grab that CSS and paste it into your style sheet, or if you use wordpress, sometimes you can add it by going into the CUSTOMIZE area and adding additional CSS there. Click the photo below to enlarge. The areas (the far right screen with the yellow highlighting) with the little colored boxes next to them can be changed and edited in real time for you to see what they’ll look like before you commit to the changes.
If you need to center your button, just use <center> before the code I’ve listed above and after that code, use </center>. Please note, if you copy the code from my website, it’s a good idea to paste it in a text editor. I’ve include a link below for the code. Your welcome 🙂
Font Awesome Buttons and Icons
Font Awesome came with my theme. I use the Genesis theme along with the Pretty Creative child theme. Many newer WordPress themes now come with Font Awesome so it’s as simple as inserting a bit of code. Here’s a simple code to use for a button if you have font awesome installed on your website:
<a class=”btn btn-danger” href=”#”>
<i class=”fa fa-envelope fa-lg” style=”color:black; “> Join the List</i>
Again, be sure to replace the text portion and the # with your own information. Font Awesome has a ton of different icons, but I used the envelope one here. You can find many more by using this link. After <i class= is where you would put the icon of your own choosing. So if you don’t want the envelope, but would like bookmark, you’d replace the fa fa-envelope with fa fa-bookmark. You can also adjust the size using 1x, 2x, 3x, 5x, etc instead of “lg“. See more examples here.
Styles and Alignment Issues
Most of the time, you wouldn’t need the style=”color:black;”. I used this to style mine because my theme wanted the buttons to be blue. You can try it without the style and see if you prefer what your theme chooses. If not, feel free to style it with a color instead. My theme also overwrites the button style which is “btn-danger” and should be red. Instead, my theme chooses to just show the text with no button. If I could figure out the CSS on my theme, I’d fix it but you know…time. You can see this button in action on my header on the home page but in white.
You can also try aligning these. I’ve had luck on my own blog with using the <div> tag. You nest the font awesome inside that tag and close it at the end with </div>. I’m sure there are better ways to do this, but this is my work-around. You’ll have to see what works with your own blog.
<a class=”btn btn-danger” href=”http://www.everydayelle.com/subscribe/”>
<i class=”fa fa-envelope fa-2x” style=”color:white; “> Join the List</i> </div>