{"id":25646,"date":"2018-04-29T18:10:01","date_gmt":"2018-04-29T08:10:01","guid":{"rendered":"https:\/\/codemyui.com\/?p=25646"},"modified":"2018-04-29T18:10:01","modified_gmt":"2018-04-29T08:10:01","slug":"tick-animation-in-css-input-checkbox","status":"publish","type":"post","link":"https:\/\/codemyui.com\/tick-animation-in-css-input-checkbox\/","title":{"rendered":"Tick Animation in CSS Input Checkbox"},"content":{"rendered":"<p>A simple CSS only tick mark animation for <a href=\"https:\/\/codemyui.com\/tag\/check-box\/\">checkbox<\/a> <a href=\"https:\/\/codemyui.com\/tag\/input-field\/\">input field<\/a> designed by Rab Rennie. <\/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\/2ac006b5918c613b4348b210cb3ee826\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Tick Animation Snippet<\/h2>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='ZOPAQA' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen input #002 \u2013 Checkbox by Rab Rennie (@Rabrennie) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A simple CSS only tick mark animation for checkbox input field designed by Rab Rennie.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/tick-animation-in-css-input-checkbox\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25647,"comment_status":"closed","ping_status":"closed","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":true,"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":[7644055,13170349,141511],"class_list":["post-25646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-check-box","tag-input-field","tag-minimalist-web-design","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Tick-Animation-in-CSS-Input-Checkbox.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25634,"url":"https:\/\/codemyui.com\/pure-css-hamburger-menu-slide-in\/","url_meta":{"origin":25646,"position":0},"title":"Pure CSS Hamburger Menu Slide In","author":"Saijo George","date":"April 23, 2018","format":false,"excerpt":"With this hamburger menu when you click on it, the navigation menu sidebar expands into view from the top left. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Menu Slide In Snippet","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"Pure CSS Hamburger Menu Slide In","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6078,"url":"https:\/\/codemyui.com\/realistic-css-switch\/","url_meta":{"origin":25646,"position":1},"title":"Realistic CSS Switch","author":"Hima Vincent","date":"February 8, 2017","format":false,"excerpt":"A checkbox input field designed to look like a toggle switch. This is a pure CSS snippet, designed by Nathan Taylor. If you are having trouble with the pen, try the archived copy on GitHub Realistic Toggle Switch Snippet","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1226,"url":"https:\/\/codemyui.com\/pure-css-check-mark-slide-animation\/","url_meta":{"origin":25646,"position":2},"title":"Pure CSS Check Mark with Slide-up Animation","author":"Hima Vincent","date":"July 20, 2016","format":false,"excerpt":"Looking for a simple slide up animation for you checkbox, you are in luck because this snippet does exactly that and it's in pure CSS!! When you click on the checkbox the check-mark slides up and on clicking it again it slides down..easy peasy. If you are having trouble with\u2026","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"Pure CSS Check Mark with Slide-up Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pure-css-check-mark-with-slide-up-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pure-css-check-mark-with-slide-up-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pure-css-check-mark-with-slide-up-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pure-css-check-mark-with-slide-up-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":147,"url":"https:\/\/codemyui.com\/pure-css-toggle-with-cross-and-tick-animation\/","url_meta":{"origin":25646,"position":3},"title":"Pure CSS toggle with cross and tick animation","author":"Hima Vincent","date":"October 7, 2015","format":false,"excerpt":"This is a beautiful toggle switch animation that morphs into a cross or tick with a smooth animation. Designed by Nikolay Talanov 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 toggle with cross and tick animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-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-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-toggle-with-cross-and-tick-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-toggle-with-cross-and-tick-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25558,"url":"https:\/\/codemyui.com\/strike-off-todo-list-animation\/","url_meta":{"origin":25646,"position":4},"title":"Strike Off ToDo List Animation","author":"Saijo George","date":"November 21, 2017","format":false,"excerpt":"I recently came across a beautiful to-do list strike off animation designed by Gal Shir and Shaw recreated that effect in CSS. When you click on the list item the square checkbox slides away and strikes off the text. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"Strike Off ToDo List Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.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\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30069,"url":"https:\/\/codemyui.com\/rounded-button-like-css-only-checkbox-glide-toggle\/","url_meta":{"origin":25646,"position":5},"title":"Rounded Button Like CSS Only Checkbox Glide Toggle","author":"Saijo George","date":"July 29, 2020","format":false,"excerpt":"Code by: Zed Dash If you are having trouble with the pen, try the archived copy on GitHub Checkbox Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Rounded-Button-Like-CSS-Only-Checkbox-Glide-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Rounded-Button-Like-CSS-Only-Checkbox-Glide-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Rounded-Button-Like-CSS-Only-Checkbox-Glide-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Rounded-Button-Like-CSS-Only-Checkbox-Glide-Toggle.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\/25646","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25646"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25646\/revisions"}],"predecessor-version":[{"id":25649,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25646\/revisions\/25649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25647"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}