Hi Ross,
I just used basic CSS to create these – I’m sure there’s quite a few button shortcode plugins out there, but for me, this was cleaner.
Here’s my CSS:
.button,
.button:visited {
display: inline-block;
*display: inline;
*zoom:1;
padding: 10px 15px;
font-size: 17px;
margin-bottom: 5px;
}
.button.green,
.button.green:visited {
background: #76B711;
color: #FFF;
}
.button.green:hover {
background: #67A00B;
}
.button.gray,
.button.gray:visited {
background:#777;
color:#FFF;
}
.button.gray:hover {
background:#606060;
}
.button.blue,
.button.blue:visited {
background:#1E72BD;
color:#FFF;
}
.button.blue:hover {
background:#1860A0;
}
I included a few colors in there.
Usage would be like this:
<a href="#" class="button blue">Blue button</a>
<a href="#" class="button green">Green button</a>
And so on.
Hope this helps 🙂
Tom