{"id":3034,"date":"2017-01-24T18:24:55","date_gmt":"2017-01-25T00:24:55","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2075"},"modified":"2017-01-24T18:24:55","modified_gmt":"2017-01-25T00:24:55","slug":"6-cool-css-button-snippets","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/6-cool-css-button-snippets\/","title":{"rendered":"6 Cool CSS Button Snippets"},"content":{"rendered":"

When it comes to styling buttons, the possibilities are endless. Check out some of these snippets and tutorials to get some ideas for your next button creations!<\/span><\/p>\n

1. Flat UI Buttons<\/a>\u00a0<\/span><\/p>\n

\"Screen<\/a><\/p>\n

These colorful buttons have a flat design, hover effects, and push transitions.<\/span><\/p>\n

2. Minimalist Hover Effect Buttons<\/a><\/span><\/p>\n

\"Screen<\/a><\/p>\n

The button designs from this tutorial are all really minimalist and simple, but each one has its own unique hove effect style. Definitely worth checking out for your next modern design project! <\/span><\/p>\n

3. CSS Favorite Button<\/a><\/span><\/p>\n

\"Screen<\/a><\/p>\n

This cute little button is pure CSS and has a beautiful transition animation that executes once\u00a0 <\/span>it\u2019s clicked. Perfect to add to any site where you want to including a liking\/favoriting functionality. <\/span><\/p>\n

4. Simple Buttons (With Option to Disable Button)<\/a><\/span><\/p>\n

\"Screen<\/a><\/p>\n

This tutorial creates simple buttons with a little dimension, and includes code to use if you want a disabled button on your site that will prevent the button\u2019s default function from executing. <\/span><\/p>\n

5. Shine Hover Button<\/a><\/span><\/p>\n

\"Screen<\/a><\/p>\n

This button reveals a glossy, animated shine when you hover over it. <\/span><\/p>\n

6. Jelly Button<\/a><\/span><\/p>\n

\"Screen<\/a><\/p>\n

A tutorial for a button that has a sort of jiggly effect when it\u2019s clicked, just like jelly!<\/span><\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

When it comes to styling buttons, the possibilities are endless. Check out some of these snippets and tutorials to get some ideas for your next button creations!<\/p>\n

1. Flat UI Buttons\u00a0<\/p>\n

\n

These colorful buttons have a flat design, […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3034"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3034"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2805"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}