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!
๐ 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):













