butterfly css is a new way to build websites that fly out of the box!
Butterfly CSS is a new way to build websites that fly out of the box! With butterfly, you can make advanced or boring things instantly in a unique syntax.
Stop_Coding._Start_Drawing.1.mp4
Tip
To use Butterfly CSS, simply add the following tags in the <head> section of your HTML document:
<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>or get it on your device:
gh repo clone AMR2010M/butterflycss
- RESPONSIVE: Intelligent attribute that instantly snaps your layout automaticly
- LAYOUT MASTER: Align everything perfectly using simple attributes—no more writing
display: flexmanually.
- DYNAMIC MOTION: Make elements soar with the iconic
flyattribute or add high-end floating orbs. - INSTANT VIBES: Trigger birthday confetti or use the Standard Pack (spin, bounce, pulse) with just one word.
- PRO DARK MODE: Seamless theme switching with smart color-pairing (e.g.,
dpurple/lpurple). - SHAPE SHIFTER: Morph elements into Hearts, Stars, or Hexagons using simple Clip-Path attributes.
- INSANELY LIGHT: A tiny 35kb footprint for lightning-fast loading and clean, modular performance.
- PRECISION SIZING: Control widths and heights (REMs or %) directly within your HTML.
- NAVBAR READY: Pin your menus to the top or bottom instantly.
- Interactive Landing Pages: Boost engagement with "flying" elements and glowing orbs.
- Creative Portfolios: Use hand-drawn vibes and custom shapes for unique branding.
- Rapid Prototyping: Build layouts and UI components in record time.
- Event Sites: Deploy instant party vibes for celebrations.
- Educational Tools: A visual-first approach to teaching HTML/CSS logic.
- High-Conversion Funnels: Use
pulseandgroweffects to drive CTA clicks.
Don't just build a website... Let it fly! 🦋🔥
.gif){kind=link}
.jpg){kind=link}
.jpeg){kind=link}
.png){kind=link}
.png){kind=link}
