GitHub<\/a><\/p>\n\nSee the Pen Modal Dialog \u2013 CSS Only (JS optional) by ekrof (@ekrof) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
A pure CSS button which on cick opens up a modal pop up box.Designed by\u00a0ekrof.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":345,"comment_status":"open","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,36516635,5441733,195143,30305495],"class_list":["post-17","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-click-animation","tag-modal-window","tag-pop-up","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/click-me-modal-window.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":30241,"url":"https:\/\/codemyui.com\/login-modal-with-floating-placeholder-and-animated-neon-submit-button\/","url_meta":{"origin":17,"position":0},"title":"Login Modal With Floating Placeholder And Animated Neon Submit Button","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Soufiane Khalfaoui Hassani If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Login Screen With A Neon Button Snippet","rel":"","context":"In \"login form\"","block_context":{"text":"login form","link":"https:\/\/codemyui.com\/tag\/login-form\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25139,"url":"https:\/\/codemyui.com\/pure-css-fullscreen-navigation-menu\/","url_meta":{"origin":17,"position":1},"title":"Pure CSS Fullscreen Navigation Menu","author":"Saijo George","date":"November 20, 2017","format":false,"excerpt":"This hamburger menu designed by H\u00e5vard Brynjulfsen will expand into a full screen navigation menu on click. If you are having trouble with the pen, try the archived copy on GitHub Fullscreen Nav Menu Snippet","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30452,"url":"https:\/\/codemyui.com\/stick-icon-on-right-side-expand-to-modal-with-store-opening-time\/","url_meta":{"origin":17,"position":2},"title":"Stick Icon On Right Side Expand To Modal With Store Opening Time","author":"Hima Vincent","date":"June 17, 2021","format":false,"excerpt":"Code by: Lisi If you are having trouble with the pen, try the archived copy on GitHub. Modal With Store Opening Time Click Animation Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Stick Icon On Right Side Expand To Modal With Store Opening Time","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26835,"url":"https:\/\/codemyui.com\/retro-yes-no-popup-dialog-box\/","url_meta":{"origin":17,"position":3},"title":"Retro Yes No Popup Dialog Box","author":"Saijo George","date":"September 6, 2018","format":false,"excerpt":"Here is a really cool retro dialog box popup designed by r\u00e9mi and coded by Thibaud Goiffon. It's got a very simple look with a colourful scrolling background and is in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Retro Dialog Box\u2026","rel":"","context":"In \"modal window\"","block_context":{"text":"modal window","link":"https:\/\/codemyui.com\/tag\/modal-window\/"},"img":{"alt_text":"Retro Yes No Popup Dialog Box","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25099,"url":"https:\/\/codemyui.com\/hamburger-button-doughnut-menu-animation\/","url_meta":{"origin":17,"position":4},"title":"Hamburger Button to Doughnut Menu Animation","author":"Saijo George","date":"November 15, 2017","format":false,"excerpt":"With this hamburger button to doughnut menu designed by Zoe, when the user clicks on the hamburger menu icon in the top right it expands to show a doughnut menu with the navigation options. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Button\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Pop Up Corner Menu On Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pop-up-corner-menu-on-click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pop-up-corner-menu-on-click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pop-up-corner-menu-on-click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pop-up-corner-menu-on-click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":134,"url":"https:\/\/codemyui.com\/interactive-dribble-invite-modal\/","url_meta":{"origin":17,"position":5},"title":"Interactive Dribble Invite Modal","author":"Hima Vincent","date":"October 19, 2015","format":false,"excerpt":"Here is a cool interactive dribble invite modal window using CSS and javascript. Designed by\u00a0Andy Tran If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Interactive Dribble Invite Modal","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/interactive-dribble-invite-modal.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\/interactive-dribble-invite-modal.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/interactive-dribble-invite-modal.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/interactive-dribble-invite-modal.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\/17","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=17"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":26122,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17\/revisions\/26122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/345"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}