{"id":264,"date":"2015-05-28T14:18:28","date_gmt":"2015-05-28T14:18:28","guid":{"rendered":"http:\/\/codemyui.com\/flat-css-buttons-with-hover-effect\/"},"modified":"2018-05-17T13:00:39","modified_gmt":"2018-05-17T03:00:39","slug":"flat-css-buttons-with-hover-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/flat-css-buttons-with-hover-effect\/","title":{"rendered":"Flat CSS Buttons with Hover Effect"},"content":{"rendered":"<p>A flat CSS button that has an animated drop down on hover. Designed by <a href=\"https:\/\/twitter.com\/B_Vilina\" target=\"_blank\" rel=\"noopener\">Benjamin Vilina<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/f9c8a7459eef2f6f5788\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='747' data-theme-id='0' data-slug-hash='wBdgXX' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Flat Buttons by Benjamin Vilina (@BenjaminVilina) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A flat CSS button that has an animated drop down on hover. Designed by Benjamin Vilina.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/flat-css-buttons-with-hover-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[94913,192416248],"class_list":["post-264","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-button","tag-hover-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":114,"url":"https:\/\/codemyui.com\/pure-css-shining-button-hover-animation\/","url_meta":{"origin":264,"position":0},"title":"Pure CSS Shining button Hover Animation","author":"Hima Vincent","date":"October 26, 2015","format":false,"excerpt":"Check out this beautiful button animation with shine effect on hover only using CSS. Designed by Dan Mensinger. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Shining button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-shining-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":148,"url":"https:\/\/codemyui.com\/pure-css-material-design-button-hover-animation\/","url_meta":{"origin":264,"position":1},"title":"Pure CSS material design button hover animation","author":"Hima Vincent","date":"October 7, 2015","format":false,"excerpt":"Pure CSS material design button with hover and click animation by \u00a0Jon Brennecke If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS material design button hover animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-material-design-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":218,"url":"https:\/\/codemyui.com\/css-button-border-hover-effects\/","url_meta":{"origin":264,"position":2},"title":"CSS Button Border Hover Effects","author":"Hima Vincent","date":"July 19, 2015","format":false,"excerpt":"This uses transform on before and after pseudo elements to create border effects on button hover with no javascript. By Les Moffat If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"CSS Button Border Hover Effects","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":68,"url":"https:\/\/codemyui.com\/pure-css-download-button-hover-animation\/","url_meta":{"origin":264,"position":3},"title":"Pure CSS Download Button Hover Animation","author":"Hima Vincent","date":"December 11, 2015","format":false,"excerpt":"A nice download button animation on hover slides two labels up and down. The lower label shows the size of the file and the upper one says\u00a0\u201cclick to begin\u201d. Designed by Edward Gyngell. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Download Button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/pure-css-download-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/pure-css-download-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/pure-css-download-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/pure-css-download-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":231,"url":"https:\/\/codemyui.com\/button-hover-to-underscore-and-check-box-animation\/","url_meta":{"origin":264,"position":4},"title":"Button hover to underscore and\u00a0check-box animation","author":"Hima Vincent","date":"July 12, 2015","format":false,"excerpt":"These pure CSS buttons animate on hover to transform in to an underscore and to a check-box.\u00a0 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button hover to underscore and check-box animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/button-hover-to-underscore-and-check-box-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26740,"url":"https:\/\/codemyui.com\/multi-layered-button-hover-effect-in-pure-css\/","url_meta":{"origin":264,"position":5},"title":"Multi Layered Button Hover Effect in Pure CSS","author":"Saijo George","date":"July 31, 2018","format":false,"excerpt":"With this pure CSS script by Raul Dronca you can add a fancy button to your website that has a cool layered effect on hover. If you are having trouble with the pen, try the archived copy on GitHub Multi Layered Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Multi Layered Button Hover Effect in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Multi-Layered-Button-Hover-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":26370,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/264\/revisions\/26370"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}