Page 2 of 2

Freebies: Elegant CSS3 Buttons

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.



I’m Eric, a freelance brand designer living on the sunny island of Singapore.

I’ve been designing for as long as I can remember – from the moments my hands first fiddled with a copy of Powerpoint on a Windows 95. Now, I fiddle with Adobe Photoshop, Illustrator and InDesign on a Macbook Pro and enjoy creating memorable visual identities for new startups and small businesses.

I believe that every business – big or small – deserves a proper brand identity that represents what they stand for. This is crucial in helping them stand out from the crowd, while attracting new customers and clients.


Interested in working with me? Feel free to drop me an e-mail at

© 2020 Eric Tong

Theme by Anders NorénUp ↑