How to create Hand-Drawn Buttons in Gutenberg

Let’s try to apply a hand-drawn effect to the Gutenberg Button block. Here is a sneak peek of what we are going to create.

Let’s start applying those effects to the Gutenberg button.

Add a button block and assign the CSS class button-1.

Choose the outline style and set any color to this button.

Then use the following CSS code to style the button.

.button-1 a{
   border-top-left-radius: 255px 15px !important;
   border-top-right-radius: 15px 225px !important;
   border-bottom-right-radius: 225px 15px !important;
   border-bottom-left-radius:15px 255px !important;
   border: solid 7px !important;
   box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
}
.button-1 a:hover{
   box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}

That’s it. we just played with the border property to make it imperfect to create a hand-drawn effect. Additionally added some shadow and change it on hover to make a nice hover effect.

This is how it looks now.

Now, this is one of the styles from the sneak peek.

From the above code, you just need to change the border property to apply a different style. For example, have a look at this updated code. I’ve also used a different CSS class for this.

.button-2 a{
   border-top-left-radius: 255px 15px;
   border-top-right-radius: 15px 225px;
   border-bottom-right-radius: 225px 15px;
   border-bottom-left-radius:15px 255px;
   border: dotted 5px !important;
   box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
}
.button-2 a:hover{
   box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}

Notice the border value in the above code dotted 5px !important;. As you can I simply changed solid to dotted and also decreased the border width value to 5px. And that resulted in the following style.

Here is another example where I used border style dashed .

So you can play around with the border property to create different button styles easily.

This tutorial is inspired by this codepen. Here is a CSS Tutorial explaining Border property.

Hope you find it useful. Stay tuned for more similar tutorials. 😇

Gutenberg Block Library
Gutenberg Patterns Library

Leave a Reply