Skip to content

Style Presets

Jump to bottom
aspenrt78 edited this page Nov 29, 2025 · 2 revisions

Style Presets

Button Builder includes 80+ professionally designed presets organized by category.

Using Presets

Applying a Preset

  1. Click Presets in the header toolbar
  2. Browse categories or search
  3. Click any preset to apply instantly
  4. Customize further as needed

Preset Tracking

When a preset is active:

  • Header shows: " Preset Name"
  • Modifying settings clears the preset indicator
  • Reset to preset defaults via header menu

State-Based Presets

Apply different presets for ON vs OFF:

  1. Open Presets panel
  2. Find "Apply to State" option
  3. Select: Always, ON Only, or OFF Only
  4. Choose different presets for each state

Preset Categories

Minimal

Clean, understated designs perfect for modern dashboards.

Preset Description Best For
Minimal Light Clean white background, subtle shadow Light theme dashboards
Minimal Dark Dark card, light text Dark theme dashboards
Minimal Outline Transparent with border Floating over backgrounds
Minimal Flat Zero shadows, flat design Ultra-clean aesthetic
Minimal Soft Soft shadows, rounded corners Friendly, approachable UI

Example: Minimal Dark

type: custom:button-card
styles:
  card:
    - background-color: '#1e1e1e'
    - border-radius: 12px
    - padding: 12px
  icon:
    - color: '#ffffff'

Glass

Glassmorphism effects with blur and transparency.

Preset Description Best For
Glassmorphism Classic frosted glass Background images
Glass Light Light-tinted glass Light backgrounds
Glass Dark Dark-tinted glass Dark backgrounds
Glass Colorful Colored tint glass Accent areas
Glass Subtle Minimal blur effect Subtle glass look
Glass Bold Strong blur, more opacity Statement pieces

Example: Glassmorphism

type: custom:button-card
styles:
  card:
    - background: 'rgba(255, 255, 255, 0.15)'
    - backdrop-filter: 'blur(10px)'
    - '-webkit-backdrop-filter': 'blur(10px)'
    - border: '1px solid rgba(255, 255, 255, 0.2)'
    - border-radius: 16px

Glass Effect Requirements:

  • Works best over images or colored backgrounds
  • Safari requires -webkit-backdrop-filter
  • Some older browsers don't support backdrop-filter

Neon

Vibrant glowing effects for bold dashboards.

Preset Description Best For
Neon Glow Classic neon light effect Gaming/entertainment
Neon Blue Electric blue glow Tech dashboards
Neon Pink Hot pink neon Bold accent
Neon Green Matrix-style green Tech aesthetic
Neon Multicolor Rainbow neon effect Attention-grabbing
Neon Pulse Animated pulsing glow Active status

Example: Neon Glow

type: custom:button-card
styles:
  card:
    - background-color: '#0a0a0a'
    - border: '2px solid #00ff88'
    - box-shadow: |
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 40px #00ff8844
    - border-radius: 8px
  icon:
    - color: '#00ff88'
    - filter: 'drop-shadow(0 0 8px #00ff88)'

Gradient

Smooth color transitions for visual depth.

Preset Description Best For
Gradient Purple Purple to blue Modern accent
Gradient Sunset Orange to pink Warm feeling
Gradient Ocean Blue to teal Calm, natural
Gradient Fire Red to yellow Warning/energy
Gradient Forest Green tones Nature themes
Gradient Night Dark blue to black Night mode

Example: Gradient Purple

type: custom:button-card
styles:
  card:
    - background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    - border-radius: 12px
  icon:
    - color: white
  name:
    - color: white

Animated

Motion effects for dynamic interfaces.

Preset Description Best For
Pulse Gentle pulsing animation Status indicators
Breathing Slow expand/contract Ambient displays
Spin Rotating icon Loading/processing
Bounce Bouncing motion Attention alerts
Shake Shaking effect Error states
Glow Pulse Pulsing glow effect Active status

Example: Pulse

type: custom:button-card
styles:
  icon:
    - animation: pulse 2s ease-in-out infinite
state:
  - value: 'on'
    styles:
      icon:
        - animation: pulse 2s ease-in-out infinite
  - value: 'off'
    styles:
      icon:
        - animation: none

3D Effects

Depth and dimensional effects.

Preset Description Best For
3D Button Push button effect Interactive elements
3D Card Lifted card shadow Card grids
3D Inset Sunken/pressed look Toggle indicators
3D Floating High elevation shadow Featured items
3D Layered Multiple shadow layers Premium feel

Example: 3D Button

type: custom:button-card
styles:
  card:
    - background: 'linear-gradient(180deg, #4a4a4a 0%, #2c2c2c 100%)'
    - border-radius: 8px
    - box-shadow: |
        0 4px 0 #1a1a1a,
        0 6px 10px rgba(0,0,0,0.3)
    - transform: translateY(0)
    - transition: all 0.1s ease
  card:hover:
    - transform: translateY(2px)
    - box-shadow: |
        0 2px 0 #1a1a1a,
        0 3px 5px rgba(0,0,0,0.3)

Cyberpunk

Futuristic sci-fi aesthetics.

Preset Description Best For
Cyberpunk Classic cyber aesthetic Gaming setups
Cyber Neon Neon with cyber style Tech themes
Cyber Grid Grid pattern overlay Digital feel
Cyber Glitch Glitch effect styling Edgy design
Cyber Terminal Terminal/console look Tech aesthetic

Example: Cyberpunk

type: custom:button-card
styles:
  card:
    - background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
    - border: '1px solid #e94560'
    - box-shadow: |
        0 0 10px #e9456066,
        inset 0 0 30px #e9456011
    - clip-path: 'polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)'
  icon:
    - color: '#e94560'

Retro

Vintage and nostalgic styles.

Preset Description Best For
Retro Pixel 8-bit pixel style Gaming nostalgia
Retro VHS VHS tape aesthetic 80s theme
Retro Arcade Arcade button style Game rooms
Retro Neon 80s 80s neon colors Synthwave
Retro Wood Wood texture feel Vintage

Nature

Organic, natural aesthetics.

Preset Description Best For
Nature Forest Forest green tones Plant sensors
Nature Ocean Ocean blue palette Pool/water
Nature Sunset Warm sunset colors Outdoor areas
Nature Earth Earthy brown tones Garden sensors
Nature Sky Sky blue gradient Weather

Icon Styles

Focused on icon presentation.

Preset Description Best For
Icon Circle Circular icon background Clean look
Icon Badge Icon with badge styling Notifications
Icon Outlined Outlined circle icon Minimal design
Icon Gradient Gradient icon background Modern accent
Icon Large Oversized icon focus Touch targets

Creating Custom Presets

Saving Your Design

Currently, custom presets can be saved by:

  1. Design your button
  2. Copy the YAML
  3. Save to your notes/documentation

Preset Request

Want a preset added? Open an issue on GitHub:

  • Describe the style
  • Include example YAML if possible
  • Provide reference images

Preset Tips

Choosing the Right Preset

Dashboard Type Recommended Presets
Modern/Clean Minimal, Glass
Dark Theme Minimal Dark, Cyberpunk, Neon
Light Theme Minimal Light, Glass Light
Gaming/Entertainment Neon, Cyberpunk, Retro
Nature/Home Nature, Glass
Touch Interface 3D Button, Icon Large

Customizing After Applying

Common modifications:

  1. Change colors - Adjust to match your theme
  2. Adjust size - Modify aspect ratio or height
  3. Swap icon - Change to entity-appropriate icon
  4. Add animation - Enable for ON state only

Performance Considerations

Heavy presets to use sparingly:

  • Neon Multicolor - Multiple shadows
  • Cyber Glitch - Complex animations
  • Glass Bold - Heavy blur effects

Light presets for many buttons:

  • Minimal Flat - Zero effects
  • Minimal Dark - Simple styling
  • Icon Circle - Clean, efficient

Next Steps

Navigation

Getting Started

Configuration

Advanced

Help

Clone this wiki locally