Stop jumping back and forth between files! ✋ Why write 20 lines of CSS when you can just type one word? Butterfly CSS v4 is the ultimate "fast-typing" framework designed for creators who want to build beautiful, moving websites without ever leaving their HTML.
📦 Quick Start: The 2-Second Install ⚡
To unlock the magic, just paste these two lines into the
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css">
<script src="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"></script>
🌪️ Standard Motion Attributes
These are your "Always-On" animations. Just add the word, and the element moves forever!
spin 🌍: A smooth, continuous 360° rotation.
bounce ⚽: A classic vertical jumping motion.
pulse 💗: A rhythmic grow and fade (heartbeat style).
swing 🧹: A playful side-to-side pendulum wiggle.
flip 🃏: Flips the element horizontally in a loop.
shake 😵💫: A rapid horizontal vibration (perfect for errors).
grow 🐣: Continuous scaling up and back.
shrink 🛰️: Continuous scaling down and back.
slide-x 🛒: Slides left and right horizontally.
slide-y 🎈: Slides up and down vertically.
🔮 Floating Ball Particles (ball-move-X)
These create glowing, magical orbs that drift across the element.
(Note: Set the parent to position: relative and overflow: hidden for these to work!)
ball-move-1 🎾: The standard glowing orb path.
ball-move-2 🥎: A different, slightly faster floating path.
ball-move-3 🌕: A larger, more visible glowing ball.
ball-move-4 🎾: Small, high-speed "kinetic" energy orb.
ball-move-5 🪐: A giant, slow-drifting atmospheric orb.
✨ Special & Artistic Effects
These change the actual "vibe" and texture of your elements.
butterfly="fly" 🦋: The signature move! Makes the element follow a complex, organic flight path like a real butterfly.
handdrawn ✍️: Uses an SVG filter to make borders and text look like a shaky, living sketch.
birthday-paper 🎊: Creates a "Confetti Rain" effect over the element.
blur 🌫️: Constant 2px soft-focus filter.
🧬 The Morph & Shape Engine
Turn any element into a geometric shape instantly, or make it transform on hover!
Geometric Clips:
circle, triangle, star, heart, hexagon, diamond, home, message, trapezoid, x, square, rectangle, ellipse, parallelogram.
The Morph Trick:
Use morph-hover="shape-name" to transition from one to another!
why butterfly?
🎉 Join the Butterfly Disco Challenge!
Ready to become a CSS wizard without any CSS? 🧙♂️
We want you to design a Digital Birthday Card using these tools. Use birthday-paper for the party atmosphere, butterfly="fly" for the magic, and handrawn to surprise your friends!
Join the Butterfly Disco Challenge for making a birthday card today and let's see your HTML dance! 🦋✨🎈
see how magic is built
or see examples
take a look at earth pro (have a happier planet for pest price):
