{"id":24888,"date":"2017-10-31T08:57:03","date_gmt":"2017-10-30T22:57:03","guid":{"rendered":"https:\/\/codemyui.com\/?p=24888"},"modified":"2018-05-16T16:36:08","modified_gmt":"2018-05-16T06:36:08","slug":"hand-drawn-border-buttons-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/hand-drawn-border-buttons-css\/","title":{"rendered":"Hand-Drawn Border Buttons in CSS"},"content":{"rendered":"<p>Here are some <a href=\"https:\/\/codemyui.com\/tag\/button\/\">great button designs<\/a> that makes the buttons <a href=\"https:\/\/codemyui.com\/tag\/hand-drawn\/\">looks like hand-drawn<\/a> buttons, it was designed by <a href=\"https:\/\/twitter.com\/tmrDevelops\" target=\"_blank\" rel=\"noopener\">Tiffany Rayside<\/a>. There are six styles to choose from Lined, Dotted and Dashed in thick and thin styles. <\/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\/ad83c95b19d9ba3f8298cad1e7206d45\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Hand-Drawn Button Snippet<\/h2>\n<p class='codepen'  data-height='515' data-theme-id='0' data-slug-hash='VeRvKX' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here are some great button designs that makes the buttons looks like hand-drawn buttons, it was designed by Tiffany Rayside. There are six styles to choose from Lined, Dotted and Dashed in thick and thin styles.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/hand-drawn-border-buttons-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24889,"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":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,1264125,30305495],"class_list":["post-24888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-hand-drawn","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/hand-drawn-border-buttons-in-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":12895,"url":"https:\/\/codemyui.com\/image-glitching-effect\/","url_meta":{"origin":24888,"position":0},"title":"Image Glitching Effect","author":"Hima Vincent","date":"March 19, 2017","format":false,"excerpt":"Here is a cool image glitching effect designed by Tiffany Rayside, it glitches on hover and at a random interval. Will work for a spooky \/ Halloween themed website. If you are having trouble with the pen, try the archived copy on GitHub Image Glitch on Hover Snippet","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Image Gliching Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-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\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":141,"url":"https:\/\/codemyui.com\/pure-css-responsive-image-caption-hover-effect\/","url_meta":{"origin":24888,"position":1},"title":"Pure CSS Responsive Image Caption Hover Effect","author":"Hima Vincent","date":"October 8, 2015","format":false,"excerpt":"Check out this awesome responsive image caption on hover with social icons and view more options using pure CSS.Designed by Tiffany Rayside. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Pure CSS Responsive Image Caption Hover Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.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-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":128,"url":"https:\/\/codemyui.com\/animated-header-background\/","url_meta":{"origin":24888,"position":2},"title":"Animated Header Background","author":"Hima Vincent","date":"October 19, 2015","format":false,"excerpt":"Checkout this colorful animated header designed by\u00a0Tiffany Rayside. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Animated Header Background","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/animated-header-background.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\/animated-header-background.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/animated-header-background.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/animated-header-background.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28812,"url":"https:\/\/codemyui.com\/horror-move-style-blurry-text-coming-into-focus-text-animation\/","url_meta":{"origin":24888,"position":3},"title":"Horror Move Style Blurry Text Coming into Focus Text Animation","author":"Saijo George","date":"November 7, 2019","format":false,"excerpt":"Here is a fancy text animation effect using lettering.js, the text loads as a blurry mess which is really hard to read and them in comes into focus revealing the text and then fades away to load the next line. This can work well for Halloween or horror-themed sites. If\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Horror Move Style Blurry Text Coming into Focus Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17652,"url":"https:\/\/codemyui.com\/hand-sketched-3d-wireframe-buttons\/","url_meta":{"origin":24888,"position":4},"title":"Hand Sketched 3D Wireframe Buttons","author":"Hima Vincent","date":"June 2, 2017","format":false,"excerpt":"Want to show some 3D wireframe buttons that look slike they were hand drawn? Then you will love this pure CSS snippet by Jesper Hills. It also has as nice push effect on click. If you are having trouble with the pen, try the archived copy on GitHub Hand Sketched\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Hand Sketched 3D Wireframe Buttons","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/hand-sketched-3d-wireframe-buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/hand-sketched-3d-wireframe-buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/hand-sketched-3d-wireframe-buttons.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/hand-sketched-3d-wireframe-buttons.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26677,"url":"https:\/\/codemyui.com\/pure-css-cartoon-style-angled-button\/","url_meta":{"origin":24888,"position":5},"title":"Pure CSS Cartoon Style Angled Button","author":"Saijo George","date":"July 15, 2018","format":false,"excerpt":"Here is an epic cartoon style button for websites designed by Imran Pardes, it has got an amazing hover effect too. If you are having trouble with the pen, try the archived copy on GitHub CSS Cartoon Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Cartoon Style Angled Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.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\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Pure-CSS-Cartoon-Style-Angled-Button.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\/24888","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=24888"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24888\/revisions"}],"predecessor-version":[{"id":25696,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24888\/revisions\/25696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24889"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}