# butterfly css

> a new way to build websites that fly out of the box! by attributes

- **Website**: https://github.com/AMR2010M/butterfly-css
- **Uneed Page**: https://www.uneed.best/tool/butterfly-css
- **Pricing**: Free
- **Category**: Design
- **Tags**: Design
- **Submitted by**: @amr.kilany2010-93e4
- **Launch Date**: 2026-09-09
- **Social Links**: [GitHub](/login?return_to=https%3A%2F%2Fgithub.com%2FAMR2010M%2Fbutterfly-css)

## About

butterfly css💗 is a new way to build websites that fly out of the box! by attribute-based fast typing🤩

Features

📱 Adaptive & Responsive Power

- 📱 RESPONSIVE BOX: Use the 'responsive' attribute on any parent to instantly create a mobile-ready flex layout! 📲🔥

- 🤖 FLEX-AUTO: The smartest layout tool! Automatically switches from row to column at 1200px. Perfect for Hero sections that need to look great on desktop AND mobile! 💻➡️📱

- 📐 LAYOUT MASTER: Use rows, columns, and center attributes to align everything perfectly without ever writing display: flex again! 🧩🎯

✨ Animation & Special Effects

- 🦋 THE ICONIC "FLY": Use butterfly="fly" to make elements soar in beautiful, random paths across your screen! 🌬️📍

- 🔮 FLOATING BALLS: Add glowing, animated orbs with ball-move-1 to ball-move-5 for that high-end "glassmorphism" look! 🔮✨

- 🎉 BIRTHDAY MAGIC: Instantly create a party vibe with the birthday-paper confetti animation! 🎊🥳

- 🪄 STANDARD PACK: spin, bounce, pulse, swing, flip, and shake—all ready with one word! 🃏💫

🎨 Visual & Styling Sorcery

- 🌑 PRO DARK MODE: Use d{color} and l{color} (e.g., dpurple lpurple) to set smart backgrounds that switch instantly with a dark-btn! 🌙💡

- ❤️ SHAPE SHIFTER: Morph elements into Hearts, Stars, Hexagons, Messages, or Home shapes using simple Clip-Path attributes! 🌟📐

- 🌈 GRADIENT GLORY: 10 pre-designed, stunning gradients (gradient-1 to gradient-10) to make your UI pop! 🎨💎

- ✏️ HAND-DRAWN VIBES: Give your site a "sketchy," artistic personality with the handdrawn filter! 🎨✍️

🛠️ Utility & Performance

- 🚀 INSANELY LIGHT: A mind-blowing 35kb! vf.js handles your sizing, df.js handles your dark mode. Fast, modular, and clean! ⚡💨

- 📏 PRECISION SIZING: Control width (w-100) and height (h-200) in REMs or percentages (w-80p) directly in your HTML! 📐📏

- 🎨 SHADOW & GLOW: Add colored shadows with s{color} (like sred) or a classic shadow to make elements float! ☁️✨

- 🧭 NAVBAR READY: Use navbar, top, or bottom to pin your menus instantly! 📍📌

Don't just build a website... Let it fly! 🦋🔥

Use Cases

- Interactive Hero Sections: Use butterfly="fly" and ball-move for high-engagement landing pages. 🦋✨

- Creative Portfolios: Apply handdrawn and Clip-Path shapes (Heart ❤️/Star ⭐) for unique branding.

- Rapid Prototyping: Build layouts instantly with responsive, flex-auto, and btn attributes. ⏱️⚡

- Celebration & Event Sites: Trigger birthday-paper confetti for instant party vibes. 🎉🥳

- Educational Coding: A "visual-first" tool for teaching children HTML/CSS logic. 👶💻

- Dynamic Sales Funnels: Use pulse and grow on CTA buttons to boost click-through rates. 📈🎯

- Instant Dark-Mode Apps: Deploy d{color} and dark-btn for seamless theme switching. 🌙📲

- Micro-Interaction Sites: Add bounce, swing, or shake to UI elements for a tactile feel. 🃏💫

- Ultra-Lightweight Mobile Webs: Leverage the 35kb footprint for lightning-fast loading. 📱