What is it?

Button Stream element creates a dynamic border animation effect on elements, such as buttons, using customizable gradient color streams. This animation provides a lively visual enhancement by streaming colors around the element's border and can be styled with different colors and speeds.

How to set it up?

To set up the Button Stream element, configure the following attributes on the target element:

'data-border-stream'. Activates the Button Stream effect on the target element (buttons, cards, etc.).

'data-stream-preset' (Optional). Specifies a preset color gradient (e.g., "sunlight", "ocean", "rainbow"). Defaults to "sunlight".

'data-stream-size' (Optional). Controls the length of the animated stream/glow segment that moves around the border. Default value: 50.

'data-stream-duration' (Optional). Duration of the streaming animation, default is 10s.

'data-hover-transition' (Optional). Transition duration for the hover effect (default is 0.5s).

'data-stream-colors' (Optional). Allows custom colors instead of preset values. Enter colors as a comma-separated list (e.g., #FF0000, #00FF00, #0000FF).

'data-glow-on-hover' (Optional). Enables or disables a glowing shadow on hover (default is true).