Neumorphic Social Action Buttons

Neumorphic Social Action Buttons is a lightweight frontend UI component built with pure HTML, CSS, and JavaScript.

The component features a dark neumorphic interface with soft raised surfaces, inset active states, subtle glow effects, custom SVG icons, and responsive styling. It includes eight commonly used social actions: Like, Dislike, Share, Save, Follow, Subscribe, Notify, and More.

Each pair of actions behaves as an independent interactive group. Selecting one action removes the active state from the other action in the same group, while clicking the selected action again toggles it off. This makes the component useful for UI demonstrations, frontend experiments, portfolio interfaces, dashboards, social applications, and reusable design inspiration.

The interface uses CSS gradients, layered box shadows, rounded controls, transition effects, and an accent color system to create the neumorphic appearance. The active state introduces an inset shadow and highlighted accent effect, giving users clear visual feedback when an action is selected.

The layout is responsive. On larger screens, the component displays four control groups in a single row. On smaller screens, the layout automatically changes to a two-column grid for improved usability.

No external CSS framework or JavaScript library is required. The icons are implemented using inline SVG, so the component can run as a standalone HTML file without additional dependencies.

Included Features

• Dark neumorphic UI design

• Like and Dislike controls

• Share and Save controls

• Follow and Subscribe controls

• Notify and More controls

• Custom inline SVG icons

• Interactive active states

• Paired action-group behavior

• Hover and click feedback

• Responsive grid layout

• CSS variable-based accent styling

• Pure HTML, CSS, and JavaScript

• No external UI framework required

• No third-party JavaScript dependencies

How It Works

Each button contains a data-group attribute. Buttons belonging to the same group are handled together by JavaScript. When a button is clicked, the active state is removed from the other button in that group and toggled on the selected button.

The visual active state is handled entirely through CSS using inset shadows, accent colors, and text glow effects.

Responsive Behavior

The desktop layout uses four equal grid columns. At screen widths below 850px, the component switches to two columns and adjusts the surrounding spacing to better fit smaller displays.

Customization

The design can be customized by changing the CSS variables defined at the top of the stylesheet. You can modify the background colors, panel colors, shadow colors, accent color, and muted text styling without changing the overall component structure.

You can also replace the SVG icons, rename actions, add additional control groups, or connect the button click events to your own backend or application logic.

Recommended Use Cases

This component is suitable for:

• Frontend practice projects

• Developer portfolios

• Social media interfaces

• Dashboard action panels

• UI/UX experiments

• Landing page components

• Design inspiration

• Interactive prototypes

• HTML/CSS/JavaScript learning projects

Important Note

The included JavaScript controls the visual interaction state only. Social actions such as likes, follows, subscriptions, notifications, or saved items are not persisted to a database or external API. Connect the event handlers to your own backend if persistent application functionality is required.