Hand-Drawn Border Buttons in CSS

From: Hand-Drawn Border Buttons in CSS – ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font.

Hand-Drawn Border Buttons in CSS

Path: Home » buttonbutton hand drawn pure css Image: Hand-Drawn Border Buttons in CSS GIF 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. If you are having trouble with the pen, try the archived copy on GitHub

Hand-Drawn Button Snippet

<h1>Hand-Drawn Border Buttons</h1>
<section>
  <button class='lined thick'>Lined Thick</button>
  <button class='dotted thick'>Dotted Thick</button>
  <button class='dashed thick'>Dashed Thick</button>
</section>
<section>
  <button class='lined thin'>Lined Thin</button>
  <button class='dotted thin'>Dotted Thin</button>
  <button class='dashed thin'>Dashed Thin</button>
</section>

@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
*{
  box-sizing:border-box;
}
html, body{
  width:100%; 
  min-height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#F0F0D8;
  font-family: 'Patrick Hand SC', cursive;
  & h1{
    margin-top:-5rem;
    text-align:center;
    color:#41403E;
    font-size:3rem;
  }
  & section{
    display:flex;
    flex-direction:row;
    justify-content:center;
    width:100%;
    min-height:100%;
    margin-bottom:3rem;
    & button{
      align-self:center;
      background:transparent;
      padding:1rem 1rem;
      margin:0 1rem;
      transition:all .5s ease;
      color:#41403E;
      font-size:2rem;
      letter-spacing:1px;
      outline:none;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      /*
      Above is shorthand for:
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
      */
       &:hover{
         box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
      } 
      &.lined.thick{
         border:solid 7px #41403E;
      }
      &.dotted.thick{
         border:dotted 5px #41403E;
      }
      &.dashed.thick{
        border:dashed 5px #41403E;
      }
       &.lined.thin{
         border:solid 2px #41403E;
      }
      &.dotted.thin{
         border:dotted 2px #41403E;
      }
      &.dashed.thin{
        border:dashed 2px #41403E;
      }
    }
  }
}
@media (max-width:620px){
  body{
    h1{
      margin-top:2rem;
    }
    & section{
      display:flex;
      flex-direction:column;
      justify-content:center;
      margin-bottom:1rem;
      & button{
        align-self:center;
        margin-bottom:2rem;
      }
    }
  }
}