A Quick Note About Semantics

The examples below are a bit heavy on HTML markup and many of them could easily be leaner. I structured them like this so that I could keep the CSS nice and separate for various parts of the button. This is so you can mix and match different portions of each of the examples below. If you implement any of these, be sure to take a close look at both the CSS and HTML to see if you can trim any fat.

Rounded Button: Two Lines

Sometimes a single line of text just doesn’t cut it. Use this button when you have a lot to say and want to cram it into a small space. For styling, I used a gradient from #99CF00 to #6DB700 and a few simple border treatments.



<div class="button">
<h3>Sign Up Now Free!</h3>
<p>30 day risk free trial.</p>