{"id":16,"date":"2018-07-19T23:30:15","date_gmt":"2018-07-19T15:30:15","guid":{"rendered":"http:\/\/blog.eric-tong.com\/?p=16"},"modified":"2018-08-08T06:03:17","modified_gmt":"2018-08-07T22:03:17","slug":"freebies-elegant-css3-buttons","status":"publish","type":"post","link":"http:\/\/blog.eric-tong.com\/freebies-elegant-css3-buttons\/","title":{"rendered":"Freebies: Elegant CSS3 Buttons"},"content":{"rendered":"

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<\/strong> on your site – with just a few lines of code<\/strong>.<\/p>\n

\"elegant2<\/a>

Elegant CSS3 Buttons<\/p><\/div>\n

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.<\/p>\n

View\u00a0Elegant CSS3 Buttons Demo<\/a><\/p>\n

Installation<\/h1>\n

Step 1:<\/h3>\n

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

[cc lang=”css”].elegant {<\/p>\n

\/* Change the border color of your button here! *\/
\nborder: 1px solid #666;<\/p>\n

padding: 8px 20px 5px;
\ndisplay: inline-block;
\ntext-decoration:none;
\nfont-size:11px;
\nborder-radius: 8px;
\ntext-align: center;
\ncolor: #666;
\n-o-transition:.3s;
\n-ms-transition:.3s;
\n-moz-transition:.3s;
\n-webkit-transition:.3s;
\ntransition:.3s;<\/p>\n

}<\/p>\n

.elegant:hover {<\/p>\n

\/* Change the hover color of your button here! *\/
\nbackground:#00cfe1;<\/p>\n

color:#FFF;
\nborder-color:#FFF;
\n}[\/cc]<\/p>\n

Step 2:<\/h3>\n

Put the following HTML code where you want the button to be:<\/p>\n

[cc lang=”html”]Button Text<\/a><\/p>\n

[\/cc]<\/p>\n

And that’s all!<\/strong> Easy, right?<\/p>\n

If you need ideas on how to use or customize the buttons, check out the elegant css3 buttons in action on my website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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. The buttons are sleek and modern, with a thin, rounded border and smooth animation on hover. […]<\/p>\n","protected":false},"author":1,"featured_media":17,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,4],"tags":[7,8,6,29,9],"_links":{"self":[{"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/posts\/16"}],"collection":[{"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":10,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":122,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/posts\/16\/revisions\/122"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.eric-tong.com\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}