Note: This topic continues in Part 2 which looks at what questions to ask when you’re planning to make the switch to CSS buttons.

Why

Slow loading pages are a major issue still, despite the speed of most computers, because people are browsing on many devices that are not up to computer speeds. When you have an author site, the goal is to direct people to your works, which means buy buttons. However, those buttons can take a while to load, especially if you offer many different venues for purchase.

One way around that is to use CSS to make your basic links into clear button forms. A simple example is here:

Or you may want something more elaborate without going beyond simple code:

How

Now that I have your attention, here’s the nitty gritty. It looks like a lot of code, but it’s really rather simple. You can always make it more complex, but to get the basics, you don’t need to.

There are two pieces to making CSS buttons, as with all CSS. First, you need to add the style to your CSS sheet and then you need to call that style when you make your button. Since this is the coding part, I’m going to break it down as best as I can, but feel free to ask questions in the comments if something is lost in the translation.

Step 1:

Here’s the style for the first of the two buttons above.

.div_button {
margin: auto;
border:2px solid #c97d1d;
background: #e2fde3;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 15px;
}

The only critical piece is the border. That’s what “buttonizes” your link. Everything else is formatting choices, but I’m going to go through them anyway.

• margin: I’ve set this to auto so that the button will line up with the post. However, if you’ve got a row or column of buttons, you want to make sure you leave enough of a margin so each button stands out as distinct.
• border: In this you first set how large the line around the buttons is going to be, then the style (more on this later), then the color it will be.
• background: This determines the color behind the link and should use something that stands out without clashing with your color scheme.
• font-size: On a pure text button, this determines the size of the button. If you want the same size across all your buttons though, you’ll have to add height and width attributes to your CSS so the wording does not control the button size.
• font-weight: Again, this affects appearance and the size of the button because bold font, for example, is bigger than normal.
• text-align: determines where the text will display in your button.
• padding: determines how much space there is between the words and the walls of the button.

There are other things you can add to the formatting that are not listed here, such as the height and width, but the above is enough to get you good looking button for a starting point, and any CSS guide on the web. I recommend w3schools.com (a link to the border style page is below in the tips) as a good, clear resource.

Step 2:

Now you build your code into your page. My personal recommendation would be to make a test page first so you can play with exactly how you want them to display before putting the code into your live pages.

The code itself is this:

</p> <div class="div_button"><a href="http://www.amazon.com/dp/product/B00LNQ3BXI/" target="_blank">Amazon</a></div> <p>

Note: Please ignore the paragraph mark below the code in the textbox. WordPress adds it automatically and I can’t get it to go away, but if you include it in your coding, it’ll push your buttons to separate lines.

The key part above is the class name. That’s what calls out the CSS you created. Within the div tags can be whatever you want to display whether it is an image, a URL, a link, etc. Whatever is inside this div will show up on your page as a button.

More

This post got quite long, but I wanted things to be clear. There is a lot more you can do with these buttons, but I don’t want to overload you. These will get you started on your test page at least, and here’s what I’ll do. I’ll split this into two parts, with the second being answers to the questions posted in the comments on this topic. I already have two things I was planning to talk about and didn’t, so those will be on next week’s post even if I get no other questions.

On the list:

• Looking at size.
• Different ways to use images with CSS buttons.

So, add anything else you’d like to learn about CSS buttons in the comments, and we’ll see what we can do to make this easy.

Tips

As promised, here’s the link to the different border styles for the more adventurous among you. Play around on your test page and you may either figure out answers or get more questions:
http://www.w3schools.com/css/css_border.asp

Note:

No, you will not find obvious CSS buttons on my site as of yet, though the framed covers on my front page use the same technique. It’s always the mechanic’s car that breaks down, and because I opted for straight buy links from the start, I don’t have the pressure of too many images. However, I do plan to convert.