website·Indexed 30 days ago
https://butterfly-css.netlify.appA CSS framework for building websites with over 100 unique, ready-to-use UI blocks and components, including social proof testimonials.
<head>.<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><head> section of your HTML document. The CSS file provides base animations, vf.js handles dimensions (height, width, margin, padding), and df.js enables dark mode functionality.<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>d{color} for dark mode backgrounds, l{color} for light mode backgrounds, dt{color} for dark mode text, and tl{color} for light mode text. The dark-btn attribute creates a toggle button.<!-- Background: dark purple in dark mode, light purple in light mode -->
<div dpurple lpurple></div>
<!-- Text: white in dark mode, blue in light mode -->
<p dtwhite tlblue></p>
<!-- Dark mode toggle button -->
<button dark-btn btn='black'></button>t. These styles use !important to override other styles. Basic colors use the t{color} format, and major colors (red, blue, green, yellow, purple, gray) support shades from 50 to 900.<!-- Basic Text Colors -->
<span tred>Red Text</span>
<span tblue>Blue Text</span>
<span tgreen>Green Text</span>
<span tblack>Black Text</span>
<span twhite>White Text</span>
<!-- Shaded Text Colors (50-900) -->
<span tred-50>Light Red Text</span>
<span tred-500>Medium Red Text</span>
<span tred-900>Dark Red Text</span>!important to ensure they override other styles. Basic colors are applied by adding the color name as an attribute. For major colors (red, blue, green, yellow, purple, gray), 10 shades are available ranging from 50 (lightest) to 900 (darkest).<!-- Basic Colors -->
<div red></div>
<div blue></div>
<div green></div>
<div yellow></div>
<div purple></div>
<div gray></div>
<div black></div>
<div white></div>
<div light></div> <!-- #f8f7ff -->
<div dark></div> <!-- #22223b -->
<!-- Shaded Colors (50-900) -->
<div red-50></div>
<div red-500></div>
<div red-900></div>
<div blue-500></div>The 'buttermonials' template allows developers to create a playful, organic testimonial section. It utilizes specific Butterfly CSS attributes to break rigid corporate layouts:
handdrawn: Applies an artistic, sketchy border to components.rotate: Tilts cards to create a 'scattered notes' effect (e.g., rotate="1" or rotate="2").responsive: Ensures the layout adapts to different screen sizes.circle: Used on images to create circular profile avatars.<!-- Include Butterfly CSS and JS in <head> -->
<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>
<!-- Testimonial Section -->
<section responsive>
<!-- Example of a single testimonial card -->
<div handdrawn nof rotate="1" h-20 columns mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="avatar.jpeg" h-4.5 mr-2 w-4> User Name
</p>
<h1 center w-90p h-50p tsmall p-1 class="font">
"Your testimonial text goes here."
</h1>
</div>
</section>darkModeApplied event on the document.document.addEventListener("darkModeApplied", (mode) => {
if (mode.detail.dark) {
console.log("Dark mode is active");
// custom dark mode logic
} else {
console.log("Light mode is active");
// custom light mode logic
}
});birthday-paper and ball-move effects require the parent element to have position: relative and overflow: hidden for best results.<!-- Confetti-like falling paper -->
<div birthday-paper></div>
<!-- Hand-drawn/sketchy appearance (may affect font) -->
<div handdrawn></div>
<!-- Applies filter: blur(2px) -->
<div blur></div>
<!-- Butterfly animation (recommended for large layouts like hero sections) -->
<div butterfly='fly'></div><div spin></div> <!-- 360 degree rotation -->
<div bounce></div> <!-- Vertical bounce -->
<div pulse></div> <!-- Grow/shrink and fade -->
<div swing></div> <!-- Side-to-side wiggle -->
<div flip></div> <!-- Horizontal flip -->
<div shake></div> <!-- Horizontal shake -->
<div grow></div> <!-- Continuous grow/shrink -->
<div shrink></div> <!-- Continuous shrink/grow -->
<div slide-x></div> <!-- Horizontal slide -->
<div slide-y></div> <!-- Vertical slide --><!-- Shadows -->
<div shadow>Default Gray Shadow</div>
<div sred>Red Shadow</div> <!-- s{color} attribute -->
<h1 tshadow>Text Shadow</h1>
<!-- Background Effects -->
<div bg=auto>Center, Cover, No-Repeat Background</div>ball-move-{n} attributes to create glowing, animated balls that float across an element. The parent element should have position: relative and overflow: hidden.<div ball-move-1>Ball 1</div>
<div ball-move-2>Ball 2</div>
<div ball-move-3>Ball 3 (Larger)</div>
<div ball-move-4>Ball 4 (Faster/Smaller)</div>
<div ball-move-5>Ball 5 (Very Large/Slow)</div>button attribute for base styling and btn='{color}' for specific color themes. The handdrawn attribute can be added for a sketchy look.<!-- Base styled button -->
<button button>Click Me</button>
<!-- Colored buttons -->
<button btn='purple'>Purple</button>
<button btn='green'>Green</button>
<button btn='rose'>Rose</button>
<!-- Hand-drawn button -->
<button btn='purple' handdrawn>Sketchy Button</button>