butterfly css framework v4.3
🎀stop coding start drawing the first kid-friendly 🧸css
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. 📱
Comments
"Hey everyone! I’m Amr, a high schooler from Egypt, and I’m so excited to finally share Butterfly CSS with you! 🦋✨ I started this project because I was tired of writing 10 classes just to make a button 'feel alive' or making a layout mobile-friendly. I wanted a framework that felt like magic—where you just type what you want (responsive, handdrawn, birthday-paper) and it just works. Why I built this: I believe coding should be as fun as playing a game. Butterfly CSS is built on Attributes, not long class names. It’s designed to be ultra-light (only 35kb!) but powerful enough to handle responsive layouts and complex animations instantly. What’s under the hood? 🚀 Fast-Typing: No more 'Class Soup'—just clean HTML attributes. 📱 Smart Layouts: My flex-auto and responsive attributes handle the heavy lifting for mobile. 🎨 Pure Creativity: From confetti (birthday-paper) to hand-drawn filters, it’s all built-in. Being a young developer, I’ve poured my heart into making this 'fly out of the box.' I’d love to get your feedback, see what you build, and hear how I can make it even better! Let’s make the web a little more beautiful, one attribute at a time. 💪🔥" — Amr (Creator of Butterfly CSS)
Premium Products
Sponsors
Buy
Makers
Makers
Comments
"Hey everyone! I’m Amr, a high schooler from Egypt, and I’m so excited to finally share Butterfly CSS with you! 🦋✨ I started this project because I was tired of writing 10 classes just to make a button 'feel alive' or making a layout mobile-friendly. I wanted a framework that felt like magic—where you just type what you want (responsive, handdrawn, birthday-paper) and it just works. Why I built this: I believe coding should be as fun as playing a game. Butterfly CSS is built on Attributes, not long class names. It’s designed to be ultra-light (only 35kb!) but powerful enough to handle responsive layouts and complex animations instantly. What’s under the hood? 🚀 Fast-Typing: No more 'Class Soup'—just clean HTML attributes. 📱 Smart Layouts: My flex-auto and responsive attributes handle the heavy lifting for mobile. 🎨 Pure Creativity: From confetti (birthday-paper) to hand-drawn filters, it’s all built-in. Being a young developer, I’ve poured my heart into making this 'fly out of the box.' I’d love to get your feedback, see what you build, and hear how I can make it even better! Let’s make the web a little more beautiful, one attribute at a time. 💪🔥" — Amr (Creator of Butterfly CSS)
Premium Products
New to Fazier?
Find your next favorite product or submit your own. Made by @FalakDigital.
Copyright ©2025. All Rights Reserved