butterfly css
an attribute-based CSS framework by Amr kilany.
Introduction
butterfly css is a lightweight, attribute-based CSS framework designed to simplify common styling tasks and add engaging visual effects to your web projects. By simply adding specific attributes to your HTML elements, you can apply predefined styles for backgrounds, shapes, animations, hover effects, buttons, and a wide range of colors.
This documentation provides a comprehensive guide to all available attributes, from installation to detailed descriptions and examples.
Installation
To use Flamingo CSS, simply add a <link> tag in the <head> section of your HTML document, pointing to your hosted float.css file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flamingo Project</title>
<!-- Include Inter font for better typography -->
<link href="https://amr2010m.github.io/butterfly-css/float.css" rel="stylesheet">
<!-- Link to your Flamingo CSS file -->
<">
</head>
<body>
<!-- Your content here -->
</body>
</html>
Important Note on Attributes: For Flamingo CSS to work, you apply its custom attributes directly to your HTML elements, **without square brackets** in the HTML tag itself.
For example, to apply flexbox styles for a row, you would write:
<div flex-row>...</div>And for a purple button, it would be:
<button btn='purple'>...</button>
The `float.css` file contains CSS rules that are internally designed to recognize these attributes without the need for square brackets in your HTML. This allows for a clean and intuitive way to add styles. Please make sure you use the attributes exactly as shown in the examples below for them to work correctly!
Layout Utilities
Applies `display: flex` with `flex-direction: row`, and centers items horizontally and vertically.
<div flex-row>...</div>
Applies `display: flex` with `flex-direction: column`, and centers items horizontally and vertically.
<div flex-column>...</div>
Centers an item within its flex container (`align-self: center; justify-self: center;`).
<div flex-row><span center>...</span></div>
Background Utilities
Sets background to `center`, `no-repeat`, and `cover`.
<div bg='auto'></div>
Applies an inset box shadow with a linear gradient, creating a glow effect.
<div glow></div>
Clip-Path Shapes
These attributes apply various geometric shapes using `clip-path`.
Clips the element into a perfect circle.
<div circle></div>
Clips the element into a triangle.
<div triangle></div>
Clips the element into an ellipse.
<div ellipse></div>
Ensures the element is a square clip path (inset 0).
<div square></div>
Clips the element into a rectangle (with 10% inset on top/bottom).
<div rectangle></div>
Clips the element into a diamond shape.
<div diamond></div>
Clips the element into a hexagon shape.
<div hexagon></div>
Clips the element into a parallelogram.
<div parallelogram></div>
Clips the element into a star shape.
<div star></div>
Clips the element into a trapezoid shape.
<div trapezoid></div>
Applies a complex, jagged clip path.
<div sharp></div>
Applies a wave-like clip path at the top.
<div wave></div>
Clips the element into a classic house shape.
<div home></div>
Sets a fixed height and width with border-radius to resemble a mobile phone.
<div mobile></div>
Clips the element into a television screen shape.
<div tv></div>
Clips the element into a sloping parallelogram.
<div slope></div>
Clips the element into a heart shape.
<div heart></div>
Applies a jagged, broken-looking clip path.
<div broken></div>
Clips the element into an 'X' shape.
<div x></div>
Clips the element into a message bubble shape with a pointer at the bottom.
<div message></div>
Applies a complex, slightly irregular octagonal clip path.
<div norad></div>
Standard Animations
These attributes apply various continuous animations to elements. These are general-purpose motion effects.
Continuously rotates the element 360 degrees.
<div spin></div>
Makes the element bounce vertically.
<div bounce></div>
Makes the element grow slightly and fade in/out.
<div pulse></div>
Makes the element wiggle from side to side.
<div swing></div>
Fades the element in while sliding up.
<div fadein></div>
Flips the element horizontally.
<div flip></div>
Makes the element shake horizontally.
<div shake></div>
Makes the element continuously grow and shrink.
<div grow></div>
Makes the element continuously shrink and grow.
<div shrink></div>
Slides the element horizontally left and right.
<div slide-x></div>
Slides the element vertically up and down.
<div slide-y></div>
Coloring Animations
These attributes apply animated background color changes using predefined palettes.
Applies a generic background color animation (changes every 1s).
<div coloring></div>
Each attribute applies a specific 3-color background animation over 3 seconds. For example, `coloring-1` animates between `#ff00b74f`, `#c800ff33`, and `#ffffff`.
<div coloring-1></div>
Specific 3-color background animation (green, yellow, orange).
<div coloring-2></div>
Specific 3-color background animation (red, cyan, light purple).
<div coloring-3></div>
Continue for `coloring-4` through `coloring-50`, each offering a unique 3-color background animation. Refer to the CSS file for exact color values.
<div coloring-4></div> <div coloring-50></div>
Floating Ball Animations
These attributes create glowing, animated balls that float across the element using `::before` pseudo-elements. The parent element should have `position: relative` and `overflow: hidden` for best results.
A glowing ball animation with a specific path and speed.
<div style="..." ball-move-1></div>
Another glowing ball animation with a different path and speed.
<div style="..." ball-move-2></div>
A larger glowing ball animation.
<div style="..." ball-move-3></div>
A faster, smaller glowing ball animation.
<div style="..." ball-move-4></div>
A very large, slow glowing ball animation.
<div style="..." ball-move-5></div>
Special Effects
These attributes apply unique visual effects to elements, often using pseudo-elements or SVG filters.
Creates a confetti-like falling paper animation over the element. The parent element should have `position: relative` and `overflow: hidden`.
<div style="..." birthday-paper></div>
Applies a subtle, moving spotlight/light focus effect to the element. The element itself should have a background color for the effect to be visible. Needs `position: relative` and `overflow: hidden`.
<div style="..." lightfouce></div>
Gives the element a hand-drawn or sketchy appearance using an SVG filter, with a hover effect. Requires `Caveat` or `Comic Sans MS` font for the example to match.
<div handdrawn></div>
Applies an arrow background image with specific styling. Useful for directional indicators.
<div arrow></div>
Applies a `filter: blur(2px)` to the element.
<div blur></div>
Rotate Utilities
Apply specific rotations to elements. These attributes provide rotation in 1-degree increments from 0 to 360 degrees. Responsive variants are also available.
Rotates the element by the specified degree (e.g., `rotate="45"` for 45 degrees, `rotate="180"` for 180 degrees). Values are in degrees without units in the attribute itself.
<div rotate="45"></div>
Responsive rotation utilities. Apply rotation only at or above specific breakpoints (Small, Medium, Large, Extra Large, Desktop). `X` represents the degree from 0 to 360.
<div sm-rotate="90"></div> <div dt-rotate="270"></div>
Width & Height Utilities
These attributes allow you to set fixed widths and heights for elements in pixels.
Sets the width of the element from 1 pixel to 999 pixels. For example, `w-100` sets width to 100px.
<div w-150></div>
Sets the height of the element from 1 pixel to 999 pixels. For example, `h-200` sets height to 200px.
<div h-120></div>
Hover Effects
These attributes apply a specific effect when the element is hovered over.
Scales the element up slightly on hover (1.08).
<div hover-1></div>
Scales the element down slightly on hover (0.92).
<div hover-2></div>
Rotates the element 8 degrees on hover.
<div hover-3></div>
Applies a subtle shadow pop effect on hover.
<div hover-4></div>
Applies a vibrant glow effect on hover (pink shadow).
<div hover-5></div>
Changes border color to `#6600ff` on hover.
<div hover-6></div>
Applies a specific green/cyan gradient background on hover.
<div hover-7></div>
Applies a blur effect (`filter: blur(2px)`) on hover.
<div hover-8></div>
Skews the element (`skew(-10deg,2deg)`) on hover.
<div hover-9></div>
Reduces opacity to `0.7` on hover.
<div hover-10></div>
Applies a pulse animation (grow/shrink) on hover.
<div hover-11></div>
Applies a wiggle animation (rotate -5deg to 5deg) on hover.
<div hover-12></div>
Applies a bounce animation on hover.
<div hover-13></div>
Flips the element horizontally (`rotateY(180deg)`) on hover.
<div hover-14></div>
Slides the element 20px to the right on hover.
<div hover-15></div>
Slides the element 20px to the left on hover.
<div hover-16></div>
Slides the element 20px up on hover.
<div hover-17></div>
Slides the element 20px down on hover.
<div hover-18></div>
Changes text color to pink (`#ff6fd8`) on hover.
<div hover-19></div>
Applies an inset shadow on hover.
<div hover-20></div>
Changes border-radius to 50px (fully rounded) on hover.
<div hover-21></div>
Applies a grayscale filter (`filter: grayscale(1)`) on hover.
<div hover-22></div>
Increases saturation (`filter: saturate(2)`) on hover.
<div hover-23></div>
Rotates hue by 90 degrees (`filter: hue-rotate(90deg)`) on hover.
<div hover-24></div>
Applies a vibrant cyan/blue neon shadow on hover.
<div hover-25></div>
Changes border style to dashed on hover.
<div hover-26></div>
Changes border style to dotted on hover.
<div hover-27></div>
Applies a subtle glass effect (`backdrop-filter: blur(8px)`) on hover. Works best on elements with content behind them.
<div hover-28></div>
Changes shadow color to yellow (`#ffd20088`) on hover.
<div hover-29></div>
Morph Hover Effects
These attributes allow an element's clip-path to smoothly transition to a different shape on hover.
On hover, the element transitions into a star shape. Combine with an initial shape like `circle` or `square`.
<div morph-hover="star" circle></div>
On hover, the element transitions into a circle shape. Combine with an initial shape like `square` or `triangle`.
<div morph-hover="circle" square></div>
On hover, the element transitions into a hexagon shape. Combine with an initial shape.
<div morph-hover="hexagon" triangle></div>
On hover, the element transitions into a diamond shape. Combine with an initial shape.
<div morph-hover="diamond" ellipse></div>
Gradients
Apply modern linear gradients as background colors.
Gradient from #6600FF to #FF6FD8.
<div gradient-1></div>
Gradient from #43e97b to #38f9d7.
<div gradient-2></div>
Gradient from #f7971e to #ffd200.
<div gradient-3></div>
Gradient from #f953c6 to #b91d73.
<div gradient-4></div>
Gradient from #30cfd0 to #330867.
<div gradient-5></div>
Gradient from #5ee7df to #b490ca.
<div gradient-6></div>
Gradient from #ee9ca7 to #ffdde1.
<div gradient-7></div>
Gradient from #f6d365 to #fda085.
<div gradient-8></div>
Gradient from #6600ff to #c6e8f8.
<div gradient-9></div>
Gradient from #ffffff to #00c3ff.
<div gradient-10></div>
Components
Card
A styled card component with padding, border-radius, and shadow, with a subtle hover effect.
<div card>...</div>
Card Title
This is some content inside a Flamingo CSS card.
Button
A base styled button with padding, border-radius, background, and hover effects.
<button button>Click Me</button>
Predefined colored buttons. Replace `{color}` with a wide range of colors. Hover effects are included.
<button btn='purple'>Purple</button> <button btn='green'>Green</button> <button btn='rose'>Rose</button>
This includes a full spectrum of colors for `btn='{color}'` attributes. Please refer to the `float.css` file for the exact color definitions.
Background Colors
Set background colors using attribute selectors for basic colors and various shades (e.g., `red`, `red-500`). These apply `!important` to override other styles.
Basic Colors
Sets background to a vibrant red.
<div red></div>
Sets background to a vibrant pink.
<div pink></div>
Sets background to a deep purple.
<div purple></div>
Sets background to a darker purple.
<div deep-purple></div>
Sets background to an indigo blue.
<div indigo></div>
Sets background to a standard blue.
<div blue></div>
Sets background to a light blue.
<div light-blue></div>
Sets background to a cyan blue.
<div cyan></div>
Sets background to a teal green.
<div teal></div>
Sets background to a vibrant green.
<div green></div>
Sets background to a light green.
<div light-green></div>
Sets background to a lime green.
<div lime></div>
Sets background to a golden yellow.
<div yellow></div>
Sets background to an amber yellow.
<div amber></div>
Sets background to an orange.
<div orange></div>
Sets background to a deep orange.
<div deep-orange></div>
Sets background to a brown.
<div brown></div>
Sets background to a standard gray.
<div gray></div>
Sets background to a blue-gray.
<div blue-gray></div>
Sets background to a dark black.
<div black></div>
Sets background to white.
<div white></div>
Sets background to a very light purple/gray (`#f8f7ff`).
<div light></div>
Sets background to a dark gray/blue (`#22223b`).
<div dark></div>
Shaded Colors (e.g., `red-50` to `red-900`)
Each major color (red, blue, green, yellow, purple, gray) has 10 shades from 50 (lightest) to 900 (darkest).
Various shades of red background.
<div red-50></div> <div red-500></div> <div red-900></div>
Various shades of blue background.
<div blue-50></div> <div blue-500></div> <div blue-900></div>
Various shades of green background.
<div green-50></div> <div green-500></div> <div green-900></div>
Various shades of yellow background.
<div yellow-50></div> <div yellow-500></div> <div yellow-900></div>
Various shades of purple background.
<div purple-50></div> <div purple-500></div> <div purple-900></div>
Various shades of gray background.
<div gray-50></div> <div gray-500></div> <div gray-900></div>
Text Colors
Set text colors using attribute selectors, prefixed with `t` for basic colors and various shades (e.g., `tred`, `tred-500`). These apply `!important` to override other styles.
Basic Text Colors
Sets text color to a vibrant red.
<span tred>...</span>
Red Text
Sets text color to a vibrant pink.
<span tpink>...</span>
Pink Text
Sets text color to a deep purple.
<span tpurple>...</span>
Purple Text
Sets text color to a darker purple.
<span tdeep-purple>...</span>
Deep Purple Text
Sets text color to an indigo blue.
<span tindigo>...</span>
Indigo Text
Sets text color to a standard blue.
<span tblue>...</span>
Blue Text
Sets text color to a light blue.
<span tlight-blue>...</span>
Light Blue Text
Sets text color to a cyan blue.
<span tcyan>...</span>
Cyan Text
Sets text color to a teal green.
<span tteal>...</span>
Teal Text
Sets text color to a vibrant green.
<span tgreen>...</span>
Green Text
Sets text color to a light green.
<span tlight-green>...</span>
Light Green Text
Sets text color to a lime green.
<span tlime>...</span>
Lime Text
Sets text color to a golden yellow.
<span tyellow>...</span>
Yellow Text
Sets text color to an amber yellow.
<span tamber>...</span>
Amber Text
Sets text color to an orange.
<span torange>...</span>
Orange Text
Sets text color to a deep orange.
<span tdeep-orange>...</span>
Deep Orange Text
Sets text color to a brown.
<span tbrown>...</span>
Brown Text
Sets text color to a standard gray.
<span tgray>...</span>
Gray Text
Sets text color to a blue-gray.
<span tblue-gray>...</span>
Blue-Gray Text
Sets text color to a dark black.
<span tblack>...</span>
Black Text
Sets text color to white.
<span twhite>...</span>
White Text
Sets text color to a very light purple/gray.
<span tlight>...</span>
Light Text
Sets text color to a dark gray/blue.
<span tdark>...</span>
Dark Text
Shaded Text Colors (e.g., `tred-50` to `tred-900`)
Each major color (red, blue, green, yellow, purple, gray) has 10 shades from 50 (lightest) to 900 (darkest).
Various shades of red text.
<span tred-50>Text</span> <span tred-500>Text</span> <span tred-900>Text</span>
Various shades of blue text.
<span tblue-50>Text</span>
Various shades of green text.
<span tgreen-50>Text</span>
Various shades of yellow text.
<span tyellow-50>Text</span>
Various shades of purple text.
<span tpurple-50>Text</span>
Various shades of gray text.
<span tgray-50>Text</span>