Button design is a science. Well-designed buttons gain more clicks, leading to higher conversion rates for your site. For this week’s Weekly Freebies, install minimalist, elegant CSS3 buttons on your site – with just a few lines of code.

elegant2 CSS3 Buttons

Elegant CSS3 Buttons

The buttons are sleek and modern, with a thin, rounded border and smooth animation on hover. They are super easy to install and easily customizable.

View Elegant CSS3 Buttons Demo

Installation

Step 1:

Put the following CSS code between <style> tags in the header of your site:

[cc lang=”css”].elegant {

/* Change the border color of your button here! */
border: 1px solid #666;

padding: 8px 20px 5px;
display: inline-block;
text-decoration:none;
font-size:11px;
border-radius: 8px;
text-align: center;
color: #666;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;

}

.elegant:hover {

/* Change the hover color of your button here! */
background:#00cfe1;

color:#FFF;
border-color:#FFF;
}[/cc]

Step 2:

Put the following HTML code where you want the button to be:

[cc lang=”html”]Button Text

[/cc]

And that’s all! Easy, right?

If you need ideas on how to use or customize the buttons, check out the elegant css3 buttons in action on my website.