How to Give Your Website a "Hand-Drawn" Look with Just ONE Word 🦋

We all love that quirky, sketchy, hand-drawn aesthetic on websites. It adds personality, makes your portfolio stand out, and gives a warm, human touch to digital interfaces.

But normally, achieving this look is a CSS nightmare. You either have to mess with complex clip-path properties, heavy SVG filters, or write hundreds of lines of custom CSS border-radius hacks.

What if I told you that you could apply this effect to any HTML element using exactly one word?

Enter Butterfly CSS.

What is Butterfly CSS?

an ultra-lightweight framework that changes how we style HTML. Instead of stacking endless utility classes, it uses simple, descriptive "attribute-based fast typing".

It was built with creativity in mind, and one of its coolest built-in features is the handdrawn attribute.

Step 1: Add the Butterfly CSS CDN

Since Butterfly CSS is incredibly light, you don't need a complex build step, Webpack, or npm installs. Just drop the CDN links into the <head> of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Sketchy Website</title>

    <!-- Add Butterfly CSS -->
    <link rel="stylesheet" href="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css)">
    <!-- Optional: Add JS engines for layout handling and dark mode -->
    <script src="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js)"></script>
    <script src="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js)"></script>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Step 2: The Magic Word

Now for the fun part. To make any element look like it was sketched with a pen, you simply add the handdrawn attribute to your HTML tag.

Butterfly CSS automatically applies a filter that distorts the borders and text to look like a living sketch.

Example: A Hand-Drawn Button

<button btn='purple' handdrawn>
    Hover over me!
</button>

(Pro Tip: The handdrawn attribute makes the element's font very sketchy as well. If you want the box to be sketchy but the text to remain perfectly crisp, you can simply override the font-family on the text inside!)

Why This is Awesome

Clean Markup: Your HTML stays incredibly readable. You instantly know what handdrawn does just by looking at it.
Rapid Prototyping: If you are building a quick landing page, a hackathon project, or a personal portfolio, you can achieve a unique design in seconds.
Zero CSS Bloat: You aren't writing custom SVG filters or hunting down third-party libraries just for a border effect.

Conclusion

If you are tired of building the same rigid, pixel-perfect, boxy websites and want to inject some fun back into your front-end development, give Butterfly CSS a try. The handdrawn attribute is just the beginning—it also features built-in clip-path shapes, pulse animations, a birthday-paper confetti effect, and effortless dark mode styling.