PhoenixDuskmoon.Component.Fun.ButtonNoise (PhoenixDuskmoon v7.2.1)

View Source

Interactive button with noise/electronic effect animation.

Examples

<.dm_fun_button_noise
  id="noise-btn-1"
  content="Click Me"
  phx-click="handle_click"
/>

<.dm_fun_button_noise
  id="noise-btn-2"
  content="Submit"
  color_scheme="electric"
  phx-click="submit_form"
/>

<.dm_fun_button_noise
  id="noise-btn-3"
  content="Download"
  font_size="20px"
  font_family="Arial, sans-serif"
/>

Attributes

  • id - Component ID (required)
  • content - Button text content (required)
  • font_size - Font size for the button text (default: "24px")
  • font_family - Font family for the button text (default: '"Josefin Sans", sans-serif')
  • color_scheme - Color scheme: default, electric, neon (default: default)
  • class - Additional CSS classes
  • phx_target - LiveView target for events

Styling

This component creates an interactive button with:

  • 72 animated light bars that appear on hover
  • Each bar has unique properties (size, duration, hue, animation)
  • Creates a noise/static electronic effect
  • Content fades out on hover while effects activate
  • Customizable colors and typography

The effect simulates electronic interference or noise that responds to hover state.

Summary

Functions

dm_fun_button_noise(assigns)

Functions

dm_fun_button_noise(assigns)

Attributes

  • id (:string) (required)
  • content (:string) (required)
  • font_size (:string) - Defaults to "24px".
  • font_family (:string) - Defaults to "\"Josefin Sans\", sans-serif".
  • color_scheme (:string) - Defaults to "default". Must be one of "default", "electric", or "neon".
  • class (:string) - Defaults to nil.
  • phx_target (:any) - Defaults to nil.
  • Global attributes are accepted.