At Nuttify we use and love WooThemes for their excellent quality theme frameworks and quality coding. All the sites deployed by Nuttify for clients include the ability to easily add buttons to your content – just using a little knowledge of HTML goes a long way.
This article will walk you through how to create a great looking button that works well on your website. These buttons are used in sliders, adds, pages and posts on your site.
To create a button in sliders, pages, posts, sidebars (afterwards called “posts”) , or other sections of your site, follow these simple steps:
- In the Dashboard go to the post that you want to edit
- In the visual editor type in, or select, the text that you want to “buttonise”
- If it is not already a link, make the text a link, by selecting it and clicking the chain link icon at the top of the visual editor.
- Now that we have a link, we are going to enter HTML edit view. Click “Text” at the top right of the main post edit section.
- Find the text you have made into a link, and that you want to be a button. You will see HTML somewhat like:
XHTML1<a href="#" title="Click me">This is a button</a>
- The anchor tag has two elements:
- href: Where the link will lead to, and
- title: The text that will display when the mouse hovers over the link.
- We will add a third element:
class="button"like so:XHTML1<a class="button" href="#" title="Click me">This is a button</a>
- It doesn’t matter where this class statement goes, as long as it is after <a and before the closing >
- Update or publish your post and you’re done. The button will look something like this:
This is a button