En Popüler CSS Efektleri (Sayfa 59)

Canlı incele Formlar

Cyber Dropdown

Cyberpunk dropdown with angular clip-path shapes.

#shadow #border

Canlı incele Formlar

Dark Dropdown

Dark themed dropdown with elevated focus state.

#hover #shadow #border

Canlı incele Formlar

Fade Background Dropdown

Dropdown with smooth background fade on focus.

#gradient #shadow #border

Canlı incele Formlar

Flip Arrow Dropdown

Dropdown with arrow that flips on focus in 3D.

#transform #shadow #border

Canlı incele Formlar

Floating Label Dropdown

Dropdown with floating label that animates when focused.

#transform #shadow #border

Canlı incele Formlar

Fluent Dropdown

Microsoft Fluent design dropdown with subtle motion.

#hover #shadow #border

Canlı incele Formlar

Glass Dropdown

Frosted glass dropdown with backdrop blur and elegant feel.

#gradient #border #filter

Canlı incele Formlar

Grouped Options Dropdown

Dropdown with optgroup for organized categorized options.

#shadow #border

Canlı incele Formlar

Icon Dropdown

Dropdown with leading icon that lights up on focus.

#transform #shadow #border

Canlı incele Formlar

Language Picker Dropdown

Language picker with code labels and globe icon.

#transform #shadow #border

Canlı incele Formlar

Large Dropdown

Oversized dropdown for prominent form selections.

#shadow #border

Canlı incele Formlar

Light Dropdown

Light theme dropdown with clean white background.

#hover #shadow #border

Canlı incele Formlar

Material Dropdown

Material design dropdown with floating label accent.

#border

Canlı incele Formlar

Menu Dropdown

Context menu dropdown with icon options.

#hover #transform #shadow

Canlı incele Formlar

Minimal Dropdown

Bare minimum dropdown with thin border and tiny arrow.

#border

Canlı incele Formlar

Modern Dropdown

Sleek modern dropdown with elevation and accent color.

#hover #shadow #border

Canlı incele Formlar

Multi-Select Chip Dropdown

Multi-select dropdown with chips for selected items.

#hover #transform #shadow

Canlı incele Formlar

Neon Dropdown

Cyberpunk neon dropdown with bright accent on focus.

#shadow #border

Canlı incele Formlar

Outline Dropdown

Outline style dropdown with no fill background.

#hover #shadow #border

Canlı incele Formlar

Pill Icon Dropdown

Pill dropdown with leading icon and rounded shape.

#transform #shadow #border

Canlı incele Formlar

Pill Group Dropdown

Group of pill dropdowns for filter selection.

#hover #border

Canlı incele Formlar

Retro Dropdown

Retro terminal dropdown with green monospace text.

#shadow #border

Canlı incele Formlar

Rotate Arrow Dropdown

Dropdown with smoothly rotating arrow indicator.

#transform #shadow #border

Canlı incele Formlar

Rounded Dropdown

Pill-shaped dropdown with extra rounded corners.

#hover #shadow #border

Canlı incele Formlar

Scale Dropdown

Dropdown that scales slightly on focus for emphasis.

#transform #shadow #border

Canlı incele Formlar

Segmented Dropdown

Segmented control with dropdown appearance.

#border

Canlı incele Formlar

Shadow Lift Dropdown

Dropdown that lifts with shadow on hover/focus.

#hover #transform #shadow

Canlı incele Formlar

Square Dropdown

Sharp-cornered dropdown with minimal aesthetic.

#hover #border

Canlı incele Formlar

Status Dropdown

Dropdown with status color indicator next to selected value.

#shadow #border

Canlı incele Formlar

Tags Input Dropdown

Dropdown with tag input for adding multiple values.

#hover #shadow #border

Canlı incele Formlar

Tree Dropdown

Hierarchical tree dropdown for nested option selection.

#hover #transform #shadow

Canlı incele Formlar

Underline Dropdown

Borderless dropdown with animated underline on focus.

#transform #border

Canlı incele Formlar

3D Flip Floating Label

Label performs a 3D flip rotation when the input receives focus.

#transform #shadow #border

Canlı incele Formlar

Amber Accent Floating Label

Warm amber-accented floating label input for cozy forms.

#transform #shadow #border

Canlı incele Formlar

Bordered Floating Label

Material outline where label sits on the border when active.

#transform #border

Canlı incele Formlar

Bounce Floating Label

Label bounces up with an elastic spring when input is focused.

#animation #transform #shadow

Canlı incele Formlar

Corner Floating Label

Label slides to the top-left corner when input is focused.

#transform #shadow #border

Canlı incele Formlar

Double Border Floating Label

Input with a double border that animates on focus, label lifts above.

#transform #shadow #border

Canlı incele Formlar

Elastic Floating Label

Label elastically springs up with multiple bounces.

#animation #transform #border

Canlı incele Formlar

Fluent Design Input

Microsoft Fluent-style input with reveal border on focus.

#transform #border

Canlı incele Formlar

Glow Floating Label

Input glows softly with a label that lifts and adopts the glow color.

#shadow #border

Canlı incele Formlar

Gradient Text Floating Label

Label takes on an animated gradient color when input is focused.

#animation #gradient #transform

Canlı incele Formlar

Floating Label Field

The placeholder lifts into a small label above the field once anything is typed.

#border #shadow #transform

Canlı incele Formlar

Material Design Input

Pure Material Design floating label with ripple-like underline.

#gradient #transform #border

Canlı incele Formlar

Outline Draw Floating Label

Border outline draws itself around the input as label floats up.

#transform #shadow #border

Canlı incele Formlar

Rose Accent Floating Label

Romantic rose-tinted floating label input.

#transform #shadow #border

Canlı incele Formlar

Floating Label Scale

Label scales down and slides up with a smooth springy motion.

#transform #shadow #border

Canlı incele Formlar

Shadow Floating Label

Label lifts with a long soft shadow trailing behind it.

#transform #shadow #border

Canlı incele Formlar

Slide Left Floating Label

Label slides left then up when input receives focus.

#transform #shadow #border

Canlı incele Formlar

Draw Underline Floating Label

Material-style input with an underline that draws itself in on focus.

#transform #border

Canlı incele Formlar

Has-Selector Validation

The wrapper turns red only after a value is entered and fails, thanks to :has().

#border #validation #has-selector

Canlı incele Formlar

Icon Background Input

Input with icon contained in a colored background square.

#transform #shadow #border

Canlı incele Formlar

Bounce Icon Input

Input whose icon continuously bounces when focused.

#animation #transform #shadow

Canlı incele Formlar

Calendar Icon Input

Date input with calendar icon that flips on focus.

#transform #shadow #border

Canlı incele Formlar

Clock Icon Input

Time input with clock icon that ticks on focus.

#animation #transform #shadow

Canlı incele Formlar

Credit Card Icon Input

Card number input with a credit card icon that tilts.

#transform #shadow #border

Canlı incele Formlar

Emphasis Icon Input

Input with an emphasized icon that scales and glows strongly.

#transform #shadow #border

Canlı incele Formlar

Eye Icon Input

Password input with eye icon that opens on focus.

#transform #shadow #border

Canlı incele Formlar

Fade Icon Input

Input whose icon fades in/out smoothly on focus.

#transform #shadow #border

Canlı incele Formlar

Left Icon Input

Standard input with a left-aligned icon.

#transform #shadow #border

Canlı incele Formlar

Location Icon Input

Address input with a location pin icon that bounces.

#animation #transform #shadow

Canlı incele Formlar

Lock Icon Input

Password input with a lock icon that unlocks on focus.

#transform #shadow #border

Canlı incele Formlar

Phone Icon Input

Phone input with phone icon that vibrates on focus.

#animation #transform #shadow

Canlı incele Formlar

Pulse Icon Input

Input whose icon pulses softly when focused.

#animation #transform #shadow

Canlı incele Formlar

Right Icon Input

Input with a right-aligned icon that highlights on focus.

#transform #shadow #border

Canlı incele Formlar

Rotate Icon Input

Input whose icon rotates continuously when focused.

#animation #transform #shadow

Canlı incele Formlar

Round Icon Input

Input with a fully rounded icon container that lights up.

#transform #shadow #border

Canlı incele Formlar

Scale Icon Input

Input whose icon scales up smoothly on focus.

#transform #shadow #border

Canlı incele Formlar

Search Icon Input

Input with a magnifier search icon that zooms on focus.

#transform #shadow #border

Canlı incele Formlar

Slide Icon Input

Input whose icon slides left when focused.

#transform #shadow #border

Canlı incele Formlar

Square Icon Input

Input with a square icon container on the right.

#transform #shadow #border

Canlı incele Formlar

User Icon Input

Username input with a person icon that glows on focus.

#transform #shadow #border

Canlı incele Formlar

Barcode Input

Input with barcode pattern background.

#gradient #transform #shadow

Canlı incele Formlar

Birthday Input

Birthday input with cake icon.

#transform #shadow #border

Canlı incele Formlar

Chip Style Input

Input displayed as a removable chip.

#hover #transform #shadow

Canlı incele Formlar

Color Picker Input

Color picker with custom swatch preview.

#shadow #border

Canlı incele Formlar

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

#gradient #shadow #border

Canlı incele Formlar

Color Swatch Picker

Color picker displayed as a row of preset swatches.

#transform #shadow #border

Canlı incele Formlar

Coupon Code Input

Coupon code input with apply button.

#hover #transform #shadow

Canlı incele Formlar

Credit Card Input

Credit card number input with card type icon.

#transform #shadow #border

Canlı incele Formlar

Currency Input

Currency input with dollar sign prefix.

#shadow #border

Canlı incele Formlar

CVC Input

CVC security code input with lock icon.

#hover #transform #shadow

Canlı incele Formlar

Date Picker Input

Date input with calendar icon and styled date picker.

#transform #shadow #border

Canlı incele Formlar

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

#animation #transform #shadow

Canlı incele Formlar

Datetime Local Input

Combined date and time picker input.

#transform #shadow #border

Canlı incele Formlar

Email Input

Email input with @ symbol prefix and validation styling.

#transform #shadow #border

Canlı incele Formlar

Email Validation Input

Email input that turns green when valid, red when invalid.

#transform #shadow #border

Canlı incele Formlar

File Upload Input

Custom styled file upload input with icon.

#hover #border

Canlı incele Formlar

File Drop Zone Input

Drag-and-drop file upload zone with dashed border.

#hover #transform #border

Canlı incele Formlar

Month Input

Month picker input with year/month selection.

#transform #shadow #border

Canlı incele Formlar

Number Input

Number input with custom styled steppers.

#hover #shadow #border

Canlı incele Formlar

Number Stepper Input

Number input with custom increment/decrement buttons.

#hover #shadow #border

Canlı incele Formlar

Password Input

Password input with lock icon and strength indicator border.

#transform #shadow #border

Canlı incele Formlar

Password Strength Input

Password input with a visual strength meter bar below.

#gradient #border

Canlı incele Formlar

Password Input with Eye Toggle

Password input with CSS-only eye icon that reveals via :focus.

#hover #transform #shadow

Canlı incele Formlar

Percentage Input

Percentage input with % suffix.

#shadow #border

Kategoriye göre gez

Popüler etiketler