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


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;
border-radius: 8px;
text-align: center;
color: #666;


.elegant:hover {

/* Change the hover color of your button here! */


Step 2:

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

[cc lang=”html”]Button Text


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.