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>- 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! π¦π₯
example code : buttermonials:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>ButterBlocks Showcase</title>
</head>
<body>
<h2 class="text-4xl f text-center mb-16" tpink> loved by the community π </h2>
<section responsive>
<div handdrawn nof rotate="2" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="7f553cbe-0536-4719-a220-090ff9ad0c8b.avif" h-4.5 mr-2 w-4>Mu Joe
</p>
<h1 center w-90p h-50p tsmall p-1>Whoa, Butterfly CSS I'm *truely* digging the focus on animations β making CSS so much less painful Kinda genius imo, to streamline the whole process</h1>
</div>
<div handdrawn nof rotate="-1" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> ankush
</p>
<h1 center tsmall w-90p h-50p p-1>"Butterfly CSS's biggest strength is its simplicity and power packed into a lightweight, beginner-friendly package."</h1>
</div>
<div handdrawn nof rotate="2" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="f0s489x1bhmhm3ctzjfpk9plb2da.jpeg" h-4.5 mr-2 w-4>Andrew Carter
</p>
<h1 center w-90p tsmall h-50p p-1>Really impressive work! I like how Butterfly CSS simplifies building creative websites without bulky frameworks. minimal yet powerful CSS feels refreshing"</h1>
</div>
<div handdrawn rotate="-2" nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4>DocuBloom
</p>
<h1 center tsmall w-90p h-50p p-1>"It's a great product for a team that is new to motion and animation would guide them in the right direction "</h1>
</div>
<div handdrawn nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> Mai Easa
</p>
<h1 center w-90p tsmall h-50p p-1> that's excellent. I liked the way the library is presented and the examples that help beginners. Honestly, the library is very good.</h1>
</div>
<div handdrawn nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> Imad Limrani
</p>
<h1 center w-90p tsmall h-50p p-1>Wonderful, keep it up, my dear brother.</h1>
</div>
</section>
<div space h-5></div>
</body>
</html>
result:
.png){kind=link}
.gif){kind=link}
.jpg){kind=link}
.jpeg){kind=link}
.png){kind=link}
.png){kind=link}
