Cyberpunk Buttons with JavaScript: Featurastic UI

Featurastic UI Buttons is a JavaScript library that helps you create modern, responsive, cyberpunk-style buttons for web applications. It currently comes with five button variants (primary, success, secondary, error, and netural) with customizable styles and animations.

The library generates unique web buttons through geometric shapes and glowing effects. Each button has an angled cut design with a polygon clip path. The styles adapt across screen sizes, and the buttons include hover states and active transforms.

The button variants use HSL color values to generate primary, secondary, success, error, and neutral options. Each variant applies a specific color scheme with background, text, and glow properties.

Featurastic UI Buttons is under development, with more features coming soon, including customizable styles, integration with React, Angular, and Vue, ripple effects, advanced animations, and accessibility options.

How to use it:

1. Include the Featurastic UI Buttons script on your webpage.

<script src="/featurastic-ui-buttons@1/fui-buttons.js"></script>

2. Add buttons to your page: Use the <button> tag with the class fui-btn and the data-variant attribute to specify the button type.

<button class="fui-btn" data-variant="primary">Primary</button>
<button class="fui-btn" data-variant="secondary">Secondary</button>
<button class="fui-btn" data-variant="success">Success</button>
<button class="fui-btn" data-variant="error">Error</button>
<button class="fui-btn" data-variant="netural">Netural</button>

3. To apply a Material-inspired ripple click effect, just add the data-ripple="true" to the button.

<button class="fui-btn" data-variant="primary" data-ripple="true">Primary</button>

Changelog:

v1.0.1 (02/17/2025)

• Update