DEV Community

Cover image for a library that adds persinallity 🎨🌸to your website:butterfly css
Amrzlabs
Amrzlabs

Posted on

a library that adds persinallity 🎨🌸to your website:butterfly css

🦋 Making HTML More Expressive With Custom Attributes

Modern CSS frameworks are incredibly powerful.

But sometimes our HTML ends up looking like this:

<div class="grid md:grid-cols-3 gap-6 animate-float rounded-xl shadow-lg">
Enter fullscreen mode Exit fullscreen mode

After writing enough projects, I started wondering:

What if some UI behaviors could be described more naturally?

What if HTML could become more expressive?

Instead of:

<div class="card floating">
Enter fullscreen mode Exit fullscreen mode

What if we could write:

<div ball-move-1>
Enter fullscreen mode Exit fullscreen mode

Or instead of importing SVGs and writing animations:

<div butterfly="fly"></div>
Enter fullscreen mode Exit fullscreen mode
butterflycss.amrzlabs.com



This idea eventually became one of the core ideas behind Butterfly CSS, an experimental CSS library focused on making interfaces feel more playful and expressive.

🦋 Flying Butterflies With One Attribute

Decorative effects usually require:

  • Images or SVGs
  • CSS animations
  • Positioning logic
  • Extra boilerplate

With Butterfly CSS:

<div butterfly="fly"></div>
Enter fullscreen mode Exit fullscreen mode

That's it.

The attribute generates a butterfly animation that can be used in hero sections, landing pages, portfolios, or anywhere that needs a little personality.

I like this syntax because:

<div butterfly="fly"></div>
Enter fullscreen mode Exit fullscreen mode

almost reads like plain English.

✏️ Making Components Feel Handmade

Modern UI is often extremely polished.

Sometimes... maybe too polished.

Adding slight imperfections can make interfaces feel more friendly and personal.

<div handdrawn>
    Testimonial Card
</div>
Enter fullscreen mode Exit fullscreen mode

This attribute gives elements a sketch-like appearance that works surprisingly well for:

  • Testimonials
  • Educational websites
  • Personal portfolios
  • Creative projects

🎈 Giving Elements Some Life

Tiny animations can dramatically change how a UI feels.

Instead of writing custom keyframes:

<div ball-move-1>
    Cute Card
</div>
Enter fullscreen mode Exit fullscreen mode

The element gently floats.

It's a small effect, but small details often make interfaces feel much more alive.

💖 Creating Shapes Directly In HTML

Another experiment was asking:

Why should simple decorative shapes require SVGs?

For example:

<div heart></div>
Enter fullscreen mode Exit fullscreen mode


The element itself becomes a heart shape using CSS.

No external assets.

No SVG editing.

Just HTML.

📱 Responsive Containers With Less Boilerplate

One of the repetitive things I write in projects is responsive product layouts.

Usually, I end up writing similar grid code over and over again.

Butterfly CSS experiments with a different approach:

<div responsive>

    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>

</div>
Enter fullscreen mode Exit fullscreen mode

The container automatically adapts its layout based on its children.

This makes product sections, galleries, testimonials, and card layouts easier to prototype.

A few attributes can completely change the personality of a page.

Why I Built This

Butterfly CSS is not trying to replace traditional CSS frameworks.

It is more of an experiment:

Can HTML become more expressive and fun to write?

I wanted to explore whether interfaces could be built in a way that feels:

  • More playful
  • More readable
  • More creative
  • Less repetitive

Because sometimes web development becomes so focused on productivity that we forget websites can also have personality.

Try It Yourself

The library is completely free to try.

📚 Documentation:

https://butterflycss.amrzlabs.com/docs

🧈 Explore all available attributes:

https://butterflycss.amrzlabs.com/buttersheet

🎨 See a complete demo:

https://butterflycss.amrzlabs.com/buttermoials

One of my favorite demos there is the hand-drawn testimonial design.

Feedback Is Welcome ❤️

Butterfly CSS is still evolving, and I'd genuinely love to hear what other developers think.

Some questions I'm curious about:

  • Do custom HTML attributes feel intuitive?
  • Would you use playful effects like these in real projects?
  • Which attribute idea do you like the most?
  • Are there other expressive attributes you'd like to see?

Feel free to leave feedback, ideas, criticism, or suggestions in the comments.

If you'd like, you can also try the library for free and share what you build with it.

I'm always looking for ways to improve it and make it more useful for developers.

Happy coding! 🦋

Top comments (0)