UINEXA SNIPPET

Split Label Button

A polished split label button with responsive hover feedback, accessible focus styling and reusable Elementor-ready markup.

CSS HTML medium FREE

Snippet Details

Difficulty: medium

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<div class="ux-split-label-button-wrap"><a class="ux-split-label-button" href="#your-link"><span class="ux-split-label-button__label">Split Label</span><span class="ux-split-label-button__icon" aria-hidden="true">↗</span></a></div>

Installation

How to use this snippet

1. Add an HTML widget in Elementor.

2. Paste the HTML code into the widget.

3. Add the CSS code to Elementor Custom CSS or your website stylesheet.

4. Add the JavaScript through Elementor Custom Code and set the location to Body End.

5. Replace #your-link with the destination URL of the button.

6. Replace example text, links and labels with your own content.

7. Test the button on desktop, tablet and mobile.

Elementor Note

Elementor usage

The snippet supports multiple instances on the same page. Use an Elementor HTML widget for the markup.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓