butterfly css

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>

switches between flex-row and flex-column on with screen morre and less than 1200 px for layout not cards for example you can use if you want a text next to image on computer be text under img if you want responsive cards or divs see responsive box section

<div flex-auto> </div>

Sets background to `dark purple`,if 'dark-btn' swithed to dark. and light purple if light

<div  dpurple lpurple> </div>

<p dtwhite tlblue></p>
                            
                            <button dark-btn btn='black' ></button>
                        

<p dtwhite tlblue></p>
                            
                            <button dark-btn btn='black' ></button>
                        

  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
    }
});

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>

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>

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>

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 a `filter: blur(2px)` to the element.

<div blur></div>

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>

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>

Sets the width in percentage.

<div w-80p></div>

Sets the height in percentage.

<div h-90p></div>

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>

Clips the element into a classic house shape.

<div home></div>

Clips the element into a heart shape.

<div heart></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>

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>

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>

use it for any parent to make responive flex box(note use it if the childs are div only)

<div responsive>   </div>

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>

A styled card component with padding, border-radius, and shadow, with a subtle hover effect.

<div card>...</div>

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.

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>

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>

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

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>

Use them for margin and padding from 10px up to 50px.

<div m-10></div> or <div p-20></div>

Set background to center, cover, no-repeat.

<div bg=auto></div>

Add a shadow with the same color.

<div sred></div>

Add a default gray shadow.

<div shadow></div>

Apply text shadow.

<h1 tshadow>Title</h1>

Use for navbar positioning.

<div navbar top></div>