DEV Community: Amrzlabs

[Boost]

Amrzlabs — Mon, 13 Jul 2026 14:24:51 +0000

Amrzlabs

Jul 12

copy-paste free responsive handdrawn html templates

#webdev #programming #software #github

1 min read

[Boost]

Amrzlabs — Mon, 13 Jul 2026 13:31:02 +0000

Amrzlabs

Jul 12

copy-paste free responsive handdrawn html templates

#webdev #programming #software #github

1 min read

copy-paste free responsive handdrawn html templates

Amrzlabs — Sun, 12 Jul 2026 23:51:46 +0000

Copy-Paste Free Handdrawn HTML Templates 🎨🦋

Looking for creative UI components with a hand-drawn aesthetic? I created 3 free copy-paste HTML templates built with Butterfly CSS!

🗨️ 1. Buttermonials – Testimonials Template
Perfect for testimonials sections in landing pages and portfolios.

🔗 Demo: https://amr2010m.github.io/butterkit/buttermonials.html

📂 2. Handdrawn Sidebar Template
A notebook-inspired sidebar with a playful sketchy style.

🔗 Demo: https://amr2010m.github.io/butterkit/aside.html

🃏 3. Handdrawn Card Template
Creative cards that instantly make your website feel more alive.

🔗 Demo: https://amr2010m.github.io/butterkit/box.html

All templates are powered by Butterfly CSS, an attribute-based framework that lets you build stunning, responsive websites without class soup. Just write intuitive HTML attributes and enjoy effects like handdrawn, birthday-paper, ball-move, dark mode utilities, and much more. 🦋✨

🌐 Website: https://butterflycss.amrzlabs.com/
📚 Documentation: https://butterflycss.amrzlabs.com/docs
📋 Buttersheet (Cheatsheet): https://butterflycss.amrzlabs.com/buttersheet
🚀 GitHub: https://github.com/AMR2010M/butterfly-css

Copy, paste, customize, and build something fun! 💞

[Boost]

Amrzlabs — Sun, 12 Jul 2026 19:45:17 +0000

Amrzlabs

Jul 12

15 Copy-Paste CSS Animations You Can Add With One Word 🦋

2 min read

15 Copy-Paste CSS Animations You Can Add With One Word 🦋

Amrzlabs — Sun, 12 Jul 2026 14:30:36 +0000

Looking for:

CSS animations examples
CSS effects copy paste
HTML animation snippets
Cool website effects

Here are some fun animations you can add instantly.

No keyframes.

No JavaScript.

No configuration.

1. Bounce Animation ⚽

Perfect for buttons, icons and CTA sections.

<div bounce>⚽</div>

2. Pulse Animation 💗

Makes elements softly grow and fade.

<div pulse>💗</div>

Perfect for:

Like buttons
Notifications
Attention grabbing elements

3. Swing Animation 🧹

<div swing>🧹</div>

Adds playful movement.

Great for:

Icons
Decorations
Hero sections

4. Spin Animation 🌍

<div spin>🌍</div>

One of the most searched CSS effects.

Useful for:

Loading states
Logos
Decorative elements

5. Shake Animation 😵‍💫

<div shake>😵‍💫</div>

Perfect for:

Invalid forms
Error messages
Funny effects

6. Flip Animation 🃏

<div flip>🃏</div>

Adds instant interaction.

7. Grow Animation 🐣

<div grow>🐣</div>

Makes elements continuously expand.

8. Shrink Animation 🛰️

<div shrink>🛰️</div>

Creates subtle breathing effects.

9. Slide X ↔️

<div slide-x>🚗</div>

Moves elements horizontally.

10. Slide Y ↕️

<div slide-y>🎈</div>

Perfect for floating decorations.

11. Floating Ball Effect ✨

<div ball-move-1></div>

Creates glowing moving particles.

There are multiple versions:

<div ball-move-1></div>
<div ball-move-2></div>
<div ball-move-3></div>
<div ball-move-4></div>
<div ball-move-5></div>

Perfect for:

Hero sections
Landing pages
AI websites
Portfolio backgrounds

12. Birthday Confetti 🎉

<div birthday-paper>

Creates falling paper effects.

Perfect for:

Birthday pages
Celebration screens
Success pages

13. Hand Drawn Effect 🎨

<div handdrawn>

Turns boring UI into sketch-style elements.

14. Flying Butterflies 🦋

Probably the weirdest one.

<div butterfly="fly"></div>

This turns elements into tiny pink butterflies that fly around.

Perfect for:

🌸 Cute websites

🧸 Kids projects

🎨 Artist portfolios

✨ Easter eggs

15. Combine Them 😈

Why stop at one?

<div pulse handdrawn>

<div ball-move-3>

<div butterfly="fly"></div>

Which One Is Your Favorite? 👀

Bounce ⚽
Pulse 💗
Swing 🧹
Floating Balls ✨
Butterflies 🦋

Keywords Developers Search Every Day

css animations examples
css effects copy paste
cool css effects
html animation examples
css snippets
website animation ideas
fun css effects
portfolio animation inspiration
landing page animations
hero section effects

All examples above are available in ,
Butterfly CSS a completely free and open source framework focused on making websites more fun.
please star our repo to encourage us continue:https://github.com/amrzlabs/butterflycss

[Boost]

Amrzlabs — Sat, 11 Jul 2026 23:51:26 +0000

Amrzlabs

Jul 11

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

3 min read

[Boost]

Amrzlabs — Sat, 11 Jul 2026 15:22:33 +0000

Amrzlabs

Jul 11

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

3 min read

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

Amrzlabs — Sat, 11 Jul 2026 02:57:15 +0000

🦋 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">

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">

What if we could write:

<div ball-move-1>

Or instead of importing SVGs and writing animations:

<div butterfly="fly"></div>

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>

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>

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>

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>

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>

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>

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! 🦋

make butterfly animation without writing any css or js

Amrzlabs — Wed, 01 Jul 2026 01:07:00 +0000

Want to make your elements turn into a butterfly? 🌸 Forget about long class names or messy JavaScript. We just launched the most elegant update for Butterfly CSS.

🦄 What’s the Big Deal?

Most libraries force you to use class="...". But Butterfly CSS is different. We use the power of HTML Attributes. To make any element change to flying butterfly , you just add one simple word to your HTML tag:

butterfly="fly"

That’s it! No classes to remember, no scripts to load, and no CSS properties to tweak. It’s like giving your HTML "wings" directly! 🕊️

💎 Why you’ll LOVE this:

Super Clean HTML: Keep your code neat and professional. 🫧
Attribute Power: Uses the smart [butterfly="fly"] selector logic. 🧠
Zero Effort: If you can dream to "fly", you can fly! ✍️
Lightweight: Ultra-fast performance with a premium look. ⚡

🛠️ How it looks:

<div butterfly="fly"> I’m a butterfly now! 🦋 </div>

Perfect for:

Adding "life" to your landing pages. 🍃
Surprising your visitors with organic movement. 😲

Butterfly CSS is turning the web into a garden. Grab the update and let your creativity fly! 🚀

Want more magical animation?
Visit our website; it’s completely free and 0 setup:

get cdn or download it (40kb)(v4) from here its free forever without limits:
https://butterflycss.amrzlabs.com/docs

animation #css #html #javascript

[Boost]

Amrzlabs — Sun, 28 Jun 2026 20:42:44 +0000

Amrzlabs

Jun 28

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

3 min read

[Boost]

Amrzlabs — Sun, 28 Jun 2026 00:34:02 +0000

Amrzlabs

Jun 28

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

3 min read

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

Amrzlabs — Sun, 28 Jun 2026 00:27:59 +0000

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.

full handdrawn example(buttermonials):

:to copy this template code for free visit directly:

https://butterflycss.amrzlabs.com/buttermoials

Have you tried Butterfly CSS yet? Let me know in the comments!