{"id":6310,"date":"2019-12-12T21:41:54","date_gmt":"2019-12-12T20:41:54","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=6310"},"modified":"2020-09-08T07:31:37","modified_gmt":"2020-09-08T05:31:37","slug":"hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","title":{"rendered":"Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40"},"content":{"rendered":"\n

Hand-Drawn Border Buttons in CSS<\/h1>\n\n\n\n

From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40<\/a><\/em><\/p>\n\n\n\n

I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font.<\/p>\n\n\n\n\n\n\n\n

Hand-Drawn Border Buttons in CSS<\/h1>\n\n\n\n

From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40<\/a><\/em><\/p>\n\n\n\n

I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

Hand-Drawn Border Buttons in CSS<\/h1>\n\n\n\n

Path: Home<\/a> \u00bb button<\/a>button <\/a>hand drawn <\/a>pure css<\/a> Image: Hand-Drawn Border Buttons in CSS GIF<\/a> Here are some great button designs<\/a> that makes the buttons looks like hand-drawn<\/a> buttons, it was designed by Tiffany Rayside<\/a>. There are six styles to choose from Lined, Dotted and Dashed in thick and thin styles. If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n\n\n\n

Hand-Drawn Button Snippet<\/h2>\n\n\n\n
<h1>Hand-Drawn Border Buttons<\/h1>\n<section>\n  <button class='lined thick'>Lined Thick<\/button>\n  <button class='dotted thick'>Dotted Thick<\/button>\n  <button class='dashed thick'>Dashed Thick<\/button>\n<\/section>\n<section>\n  <button class='lined thin'>Lined Thin<\/button>\n  <button class='dotted thin'>Dotted Thin<\/button>\n  <button class='dashed thin'>Dashed Thin<\/button>\n<\/section><\/code><\/pre>\n\n\n\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Patrick+Hand+SC);\n*{\n  box-sizing:border-box;\n}\nhtml, body{\n  width:100%; \n  min-height:100%;\n  margin:0;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  background:#F0F0D8;\n  font-family: 'Patrick Hand SC', cursive;\n  & h1{\n    margin-top:-5rem;\n    text-align:center;\n    color:#41403E;\n    font-size:3rem;\n  }\n  & section{\n    display:flex;\n    flex-direction:row;\n    justify-content:center;\n    width:100%;\n    min-height:100%;\n    margin-bottom:3rem;\n    & button{\n      align-self:center;\n      background:transparent;\n      padding:1rem 1rem;\n      margin:0 1rem;\n      transition:all .5s ease;\n      color:#41403E;\n      font-size:2rem;\n      letter-spacing:1px;\n      outline:none;\n      box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);\n      border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\n      \/*\n      Above is shorthand for:\n      border-top-left-radius: 255px 15px;\n      border-top-right-radius: 15px 225px;\n      border-bottom-right-radius: 225px 15px;\n      border-bottom-left-radius:15px 255px;\n      *\/\n       &:hover{\n         box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);\n      } \n      &.lined.thick{\n         border:solid 7px #41403E;\n      }\n      &.dotted.thick{\n         border:dotted 5px #41403E;\n      }\n      &.dashed.thick{\n        border:dashed 5px #41403E;\n      }\n       &.lined.thin{\n         border:solid 2px #41403E;\n      }\n      &.dotted.thin{\n         border:dotted 2px #41403E;\n      }\n      &.dashed.thin{\n        border:dashed 2px #41403E;\n      }\n    }\n  }\n}\n@media (max-width:620px){\n  body{\n    h1{\n      margin-top:2rem;\n    }\n    & section{\n      display:flex;\n      flex-direction:column;\n      justify-content:center;\n      margin-bottom:1rem;\n      & button{\n        align-self:center;\n        margin-bottom:2rem;\n      }\n    }\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font.<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","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":[18,46],"tags":[],"class_list":["post-6310","post","type-post","status-publish","format-standard","hentry","category-themes","category-web"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1DM","jetpack-related-posts":[{"id":6313,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/comicbook-inspired-hand-drawn-borders-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":6310,"position":0},"title":"Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 \u00a0 Here are some pure CSS borders that looks like it was pulled from a comic book, it has got that distinct hand-drawn look and feel to it. If you are going for a comic book inspired layout for your page you will\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6373,"url":"https:\/\/monodes.com\/predaelli\/2020\/01\/01\/how-to-style-your-gtk-app-with-css-and-haskell-codeburst\/","url_meta":{"origin":6310,"position":1},"title":"How to Style Your GTK App with CSS and Haskell – codeburst","author":"Paolo Redaelli","date":"2020-01-01","format":"link","excerpt":"For the upcoming release of Gifcurry \u2014 an open-source, video-to-GIF maker \u2014 a completely custom theme was made using CSS and Haskell. The\u2026 Source: How to Style Your GTK App with CSS and Haskell - codeburst How to Style Your GTK App with CSS and Haskell Lettier Jun 28, 2018\u2026","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"Lettier","src":"https:\/\/i0.wp.com\/miro.medium.com\/fit\/c\/48\/48\/1%2ADM2bfIVj3LLgyG3hMirauw.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":10748,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","url_meta":{"origin":6310,"position":2},"title":"My little printer-friendly CSS","author":"Paolo Redaelli","date":"2023-08-30","format":false,"excerpt":"Here is my little \"Printer friendly CSS\" that I add to each and every page using Simple Custom CSS and JS \/* override styles when printing *\/ @media print { @page { margin: 2cm; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } \/* target the first\u2026","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4923,"url":"https:\/\/monodes.com\/predaelli\/2018\/11\/17\/css-the-perfect-print-stylesheet-the-jotform-blog\/","url_meta":{"origin":6310,"position":3},"title":"CSS: The Perfect Print Stylesheet | The JotForm Blog","author":"Paolo Redaelli","date":"2018-11-17","format":false,"excerpt":"Here's something I shall add to my themes, expecially \"bollettino\" and \"qualita\": CSS: The Perfect Print Stylesheet | The JotForm Blog CSS: The Perfect Print Stylesheet by Andreas Hecht Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"a4-print","src":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":7323,"url":"https:\/\/monodes.com\/predaelli\/2020\/06\/08\/css-pseudo-selectors-you-might-have-missed-bits-and-pieces\/","url_meta":{"origin":6310,"position":4},"title":"CSS Pseudo-Selectors You Might Have Missed – Bits and Pieces","author":"Paolo Redaelli","date":"2020-06-08","format":"link","excerpt":"Useful CSS pseudo-classes that are often overlooked. Source: CSS Pseudo-Selectors You Might Have Missed - Bits and Pieces (Pseudo) selectors let you assign styles to what are, in effect, phantom classes that are inferred by the state of certain elements, or markup patterns within the document, or even by the\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":10693,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/13\/css-only-dark-mode-without-js-simon-dalvai\/","url_meta":{"origin":6310,"position":5},"title":"CSS only dark mode without JS – Simon Dalvai","author":"Paolo Redaelli","date":"2023-08-13","format":"quote","excerpt":"This css one liner can define how your site looks on a device with dark mode set in the browser settings. @media (prefers-color-scheme: dark) Or if your main style is dark mode, you can define how the light mode will look. @media (prefers-color-scheme: light) Source: CSS only dark mode without\u2026","rel":"","context":"In "Web"","block_context":{"text":"Web","link":"https:\/\/monodes.com\/predaelli\/category\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/6310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=6310"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/6310\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=6310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=6310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=6310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}