How it works

Ripple Button v5 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Ripple Animation controls

First Color: first ripple color.

Second Color: second ripple color.

Duration

Stagger: the delay between ripples.

Swap Animation controls

Duration

How it works

FlipFlop Button v1 is not nestable. Set the Flip and Flop text in their groups.

FlipFlop Button v1 is divided into a Flip styling part and a Flop styling part, including typography, background and border.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Flip

Text: the default label.

Flop

Text: the label that appears on hover.

Flipflop Animation

Perspective: the flipflop effect intensity.

Duration

How it works

FlipFlop Button v2 is not nestable. Set the Flip and Flop text in their groups.

FlipFlop Button v2 is divided into a Flip styling part and a Flop styling part, including typography, background and border.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Flip

Text: the default label.

Color

Background

Flop

Text: the label that appears on hover.

Color

Background

Style

Padding

Border radius

Flipflop Animation

Duration

How it works

FlipFlop Button v3 is not nestable. Set the Flip and Flop text in their groups.

FlipFlop Button v3 is divided into a Flip styling part and a Flop styling part, including typography, background and border.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Flip

Text: the default label.

Flop

Text: the label that appears on hover.

Flipflop Animation

Perspective: the flipflop effect intensity.

Rotation: the unfold rotation degree.

Duration

How it works

Marquee Button v2 is not nestable. Set the marquee title in the Marquee group and the swapped title in the Swap Title group. Dimensions are determined by the marquee title. It is recommended to have a marquee title longer than the swapped title, otherwise it may overflow.

Marquee animation is made of the marquee title and a clone.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Marquee

Text: the marquee title.

Color

Background

Gap

Animation controls

Speed: similar to a duration. Will determine how much time a marquee iteration should last.

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Reverse: if enabled, the marquee direction is reversed.

Translate Animation controls

Duration

Delay

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Swap Title

Text: the swapped title.

Color

Background

Swap Animation controls

Type: determines how the swapped title will be splitted. Line, Words or Chars.

Stagger: determines the delay to apply before the second letter or word starts animating and so on.

Duration

Delay

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Background Animation controls

Duration

Delay

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v4 is not nestable. Set the text in the Content group.

Arrow Button v4 consists of a label, and two arrows (original, and a duplicated one on hover), so there are 3 parts to style and several combinations that can be achieved.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Text padding Y

Text padding X

Text background

Text border radius

Arrow

Icon: the original arrow. There are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Duplicate icon: the duplicated arrow that appears on hover. Same 5 options as Icon.

Size

Color

Icon padding

Icon background

Icon border radius

Duration

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v3 is not nestable. Set the text in the Content group.

The arrow expands across the button on hover, in front of the label.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Direction: you can use Direction to change the direction of the arrow, to place it to the left or right. Direction and padding have to be combined. If Direction is set to right and a Padding right of 2px is applied, the arrow will expand to the left but will leave a 2px on the other side, so that it is symmetric. Same happens if Direction is set to left with the Padding left property.

Padding Y

Padding left

Padding right

Gap

Background

Border radius

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Size

Padding

Weight

Color

Background

Border radius

Default rotation: the rotation of the arrow at rest.

Hover rotation: the rotation the arrow will rotate to on hover.

Duration

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Ripple Button v1 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a.

Target blank: opens the link in a new tab when enabled. Shown when HTML tag is a.

Animation controls

Side: From top, From bottom, From left or From right. Just like the demos.

Amplitude: determines the size of the mask when hovered. Has to be set in %. It is specially useful for square or big buttons.

Text skew: determines the amount of skew to apply to the title. Learn more about skew here.

In transition duration: determines the entrance duration of the mask.

Out transition duration: determines the leave duration of the mask.

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Dot Button v1 is not nestable. Set the text in the Content group.

Dot Button v1 consists of a label and three dots. Swap text is the label that appears on hover.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Swap

Swap text: the text that replaces the label on hover.

Style

Padding Y

Padding X

Gap

Background

Border radius

Dots

Size

Origin: from where the dot swap will come from.

First color

Second color

Third color

Dot duration

Text duration: text swap duration.

How it works

Dot Button v2 is not nestable. Set the text in the Content group.

Dot Button v2 consists of a label and three dots.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Padding Y

Padding X

Background

Border radius

Dots

Size

Margin left: the left margin of the dots.

First color

Second color

Third color

Duration

Stagger: the delay between dots.

How it works

Dot Button v3 is not nestable. Set the text in the Content group.

Dot Button v3 consists of a label and three dots.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Padding Y

Padding X

Background

Border radius

Dots

Size

Margin left: the left margin of the dots.

First color

Second color

Third color

Duration

Stagger: the delay between dots.

How it works

Anyside Button is not nestable. Set the text in the Content group.

Anyside Button's in/out and color/path transitions are segregated with their own controls so that they are highly customizable.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Animation

Event: determines when the animation will be triggered. Hover or Click.

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Path background: the fill color of the path / click ripple.

Circle dimensions: the size of the click ripple. Used when Event is Click.

In path transition: the duration of the path animation on enter. Used when Event is Hover.

Out path transition: the duration of the path animation on leave. Also used as the click ripple duration when Event is Click.

Hover color: the text color on hover. Used when Event is Hover.

In color transition: the duration of the color animation on enter. Used when Event is Hover.

Out color transition: the duration of the color animation on leave. Used when Event is Hover.

How it works

Mask Button is not nestable. Set the text in the Content group.

Mask requires the CSS mix blend mode property to achieve an appropriate Mask Button effect. It will be applied at the text. Learn more about CSS mix blend mode property here.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Mix blend mode: applied at the text.

Border radius

Mask

Width

Border radius

Background

Transition duration

How it works

Nudge Button is divided into the button and the nudge parts. Set the button text in the Content group. Button padding, background and radius live in the Nudge Button style.

Nudge Button is a nestable element. Drop any element into the Nudge slot and it will be placed inside the nudge part. While the slot is empty, it shows Nudged.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Nudge

Height

Background

Vertical padding

Horizontal padding

Border radius

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v1 is not nestable. Set the text in the Content group.

Arrow Button v1 consists of a label, an arrow and the button itself, so there are 3 parts to style and several combinations that can be achieved. Title style styles the label. Circle style styles the arrow circle.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Swap animation

Swap: Enable or Disable. If Enable, a swap hover is included at the label.

Swap text: the text that replaces the label on hover. Shown when Swap is Enable.

Title style

Padding Y

Padding X

Background

Border radius

Circle style

Padding Y

Padding X

Background

Border radius

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Position: determines where the arrow will be set. Left will set arrow before the label. Right will set arrow after the label.

Size

Color

Rotate

Scale: determines how much scale to apply on hover. The demo uses 1.25.

Duration: also used for the swap animation when Swap is Enable.

How it works

Arrow Button v8 is not nestable. Set the text in the Content group.

Arrow Button v8 consists of a label, an arrow and an underline. These parts of the button can be styled at pleasure.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Gap

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Size: the default arrow dimensions.

Size to: the new arrow dimensions on hover.

Padding

Color

Background

Border radius

Duration

Easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

Underline

Color

Height

Position: the distance of the underline below the label.

Duration

Easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v9 is not nestable. Set the text in the Content group.

Arrow Button v9 consists of a label and an arrow. These parts of the button can be styled at pleasure, as well as the animation. The arrow includes a looping dotted track.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Padding Y

Padding X

Background

Border radius

Arrow

Fill: the arrow fill color.

Highlight: the highlight overlay on the arrow.

Width: the default arrow width. On hover the arrow expands across the button.

Inset: the gap between the arrow and the button edge.

Radius

Duration: the duration of the hover expansion.

Easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

Track height: the height of the dotted track inside the arrow.

Track duration: the duration of one loop of the track animation.

Track easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Layer Button is not nestable. Set the original layer text in the Content group. Layer Button supports four extra layers. If a layer should not be included, disable Show layer in that layer group.

Each layer has its own group with text, hover color, hover background, transition duration and z-index properties. Layer padding, background and radius live in the Layer Button style.

Layers should follow a z-index structure to achieve an appropriate Layer Button effect. Same occurs with Translate to, that will translate the layer to the distance set on hover, and Translate from, that will translate the layer from the distance set by default.

Content

Text: the original layer text.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Original hover

Translate to: translates the original layer to this distance on hover.

Hover color

Hover background

Z-index on hover

Transition duration

First layer

Show layer: if enabled, this layer is included.

Text: the layer title. Shown when Show layer is enabled.

Translate from: translates the layer from this distance by default. Shown when Show layer is enabled.

Translate to: translates the layer to this distance on hover. Shown when Show layer is enabled.

Hover color: shown when Show layer is enabled.

Hover background: shown when Show layer is enabled.

Z-index: shown when Show layer is enabled.

Z-index on hover: shown when Show layer is enabled.

Transition duration: shown when Show layer is enabled.

Second layer

Same controls as First layer.

Third layer

Same controls as First layer.

Fourth layer

Same controls as First layer.

How it works

Shiny Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Shiny

Border width

Border radius

Shiny color: the color applied to the shine.

Background: the background behind the shiny effect.

Fade duration: applied to the entrance and exit fade.

How it works

Ripple Button v7 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Ripple Animation controls

From: top or bottom.

Ripple color lives in the Ripple Button v7 style, targeting .ne-ripple-button-v7__mask.

Duration

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Swap Animation controls

From: top or bottom.

Translate: the distance from which the text will come from.

Duration

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Squeezy Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Padding Y

Padding X

Text color

Background

Border radius

Squeezy Animation controls

To border radius: the border radius the button will transform to on hover.

Duration

Swap Animation controls

Translate: the distance from where the swap text will come from.

Duration

How it works

Reel Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Reel controls

Original reel typography lives in the Reel Button style. There is no Typography control for the second reel text.

Translate: the amount to translate on the original reel on hover.

Duration

How it works

Prism Button v2 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Prism Animation controls

Perspective: prism effect intensity.

Translate: distance between prisms.

Duration

How it works

Pixels Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Padding Y

Padding X

Background

Border radius

Pixels controls

Cells: the number of cells in which the pixels button will be divided.

Color: the pixels’ color.

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Marquee Button is not nestable. Set the original button text in the Content group and the marquee text in the Marquee group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Marquee controls

Marquee text: the text of each marquee fragment.

Repeats: the number of text fragments to be created at the marquee. You should generate a great number for big buttons.

Duration: will determine speed. It will consider the number of text fragments set so it may need to be adjusted.

Reverse: if enabled, the marquee direction is reversed.

Gap: the gap to be set between each title repeat.

Include left icon: adds a left icon to each marquee fragment when enabled.

Left icon: the left icon image of the marquee text. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon to each marquee fragment when enabled.

Right icon: the right icon image of the marquee text. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

How it works

Strip Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Strip Animation controls

From: left or right.

Duration

How it works

Arrow Button v7 is not nestable. Set the text in the Content group.

Arrow Button v7 consists of a label and one arrow. These parts of the button can be styled at pleasure. Swap text is the label that appears on hover.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Swap

Swap text: the text that replaces the label on hover.

Style

Padding Y

Padding X

Gap

Background

Border radius

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Size

Padding

Color

Background

Border radius

Duration

Scale: applied to the arrow and the arrow’s circle on hover.

Easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Crystal Button is not nestable. Set the text in the Content group.

Crystal Button is built thanks to a combination of CSS filters that can be customized directly at Crystal: filter, blur, brightness and saturate. You can learn about CSS filters here.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Crystal controls

Radius

Filter

Blur

Brightness

Saturate

How it works

Neumorphic Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Neumorphic

Left shadow color: determines the shine color applied at top left.

Right shadow color: determines the shine color applied at bottom right.

Spread: determines the neumorphic intensity.

Duration

Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Stripes Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Padding Y

Padding X

Background

Border radius

Stripes blend color: the first color used by the stripe overlay blend.

Stripes Animation controls

From: where the stripes will come from. Top or Bottom.

Degree: the stripes' degree.

Translate speed: the stripes' reveal duration.

Translate CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Movement duration: how much time a full loop iteration should last.

Movement CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Ripple Button v6 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Ripple Animation controls

Ripple color lives in the Ripple Button v6 style, targeting .ne-ripple-button-v6::after.

Translate: ripple’s intensity.

Duration

Delay

How it works

Arrow Button v6 is not nestable. Set the text in the Content group.

Arrow Button v6 consists of a label and one arrow. These parts of the button can be styled at pleasure. Swap text is the label that appears on hover.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Swap

Swap text: the text that replaces the label on hover.

Style

Padding Y

Padding X

Background

Border radius

Arrow

Size

Color

Mid width: the width of the middle segment of the bolt arrow.

Translate from: the distance where the arrow will come from.

Text duration: the duration of the label swap.

Translate duration: the duration applied to the distance animation.

Animation duration: the duration applied to the arrow movement on one single loop.

Ease: applied to both the entrance and the loop. You can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Stretchy Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Stretch Animation controls

Stretch amount: the stretch intensity applied to the button.

Stretch text: the stretch intensity applied to the text.

Duration

How it works

Ripple Button v4 is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Background: the button background color.

Ripple Animation controls

First Color: first ring color.

Second Color: second ring color.

Duration

Stagger: the delay between rings.

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Swap Animation controls

Duration

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Modal Button is not nestable. Set the button text in the Content group. Add, delete and customize list items using the Modal items repeater.

Content

Button text: the button label.

HTML tag: button by default. Options: button, div or span.

Modal items

Text: the item label.

Link: optional URL. If set, that item renders as an anchor.

Open in new tab: opens the link in a new tab when enabled.

Animation controls

Button press translate: when the button is pressed (active), how much translateY to apply to the title and arrow.

Animation duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Item background on hover: the background applied to a list item on hover.

How it works

Bubbles Button is not nestable. Set the text in the Content group. Bubbles Button is made up of Bubble items in the Bubbles repeater. You can add and remove a Bubble as needed.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Inner background

Outer background

Border radius

Inner box shadow

Bubbles

A repeater of bubble items. Each item:

Width

Height

Blur

Background

Animation type: Move down right, Move up left, Move diagonal, Move right, Move zigzag, Move left, Move up, Move horizontal, Move vertical, Move right up, Move straight, Move right down or None.

Position X

Position Y

Duration

Delay

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v5 is not nestable. Set the text in the Content group.

Arrow Button v5 consists of a label and one arrow (original, and a duplicated one on hover). These parts of the button can be styled at pleasure. The duplicated arrow has an absolute position. You can modify its left distance in Left offset.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Padding Y

Padding X

Gap

Background

Border radius

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Size

Color

Left offset: the left distance of the duplicated arrow.

Duration

Stagger: the delay between arrow copies (the flash effect applied to the arrows).

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Button v2 is not nestable. Set the text in the Content group.

The arrow expands across the button on hover, behind the label.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Style

Direction: you can use Direction to change the direction of the arrow, to place it to the left or right. Direction and padding have to be combined. If Direction is set to right and a Padding right of 2px is applied, the arrow will expand to the left but will leave a 2px on the other side, so that it is symmetric. Same happens if Direction is set to left with the Padding left property.

Padding Y

Padding left

Padding right

Gap

Background

Border radius

Arrow

Icon: there are 5 arrows to choose from: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Size

Padding

Weight

Color

Background

Border radius

Default rotation: the rotation of the arrow at rest.

Hover rotation: the rotation the arrow will rotate to on hover.

Duration

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Prism Button is not nestable. Set the front and back titles in the Front and Back groups. The button takes the longest title as its dimensions.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Front

Text: the front title.

Color

Background

Front icons

Include left icon: adds a front left icon when enabled.

Left icon: the front left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a front right icon when enabled.

Right icon: the front right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Back

Text: the back title.

Color

Background

Back icons

Include left icon: adds a back left icon when enabled.

Left icon: the back left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a back right icon when enabled.

Right icon: the back right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Font size

Padding Y

Padding X

Animation controls

From: top or bottom.

Perspective: determines the reveal intensity.

Transition duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Ripple Button v3 is not nestable. It has 2 available types: From top or From bottom. Both of them are showcased at the demos.

The button admits different titles at top and bottom states. The longest title will determine button dimensions.

Ripple Type: From bottom or From top. Just like the demos.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a.

Target blank: opens the link in a new tab when enabled. Shown when HTML tag is a.

General style

Border radius: the border radius of the button.

Top Ripple

Title: the title shown on the top state.

Bottom Ripple

Title: the title shown on the bottom state.

Translate Animation controls

Duration

Delay

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Border Animation controls

Duration

Delay

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Rainbow Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Style

Background

Border color

Border width

Border radius

Colors

Add, delete and customize rainbow colors using the Colors repeater. Each item has a Color.

Rainbow Animation controls

Always play: if enabled, the animation will always play instead of playing only on hover.

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Glowing Button is not nestable. Set the text in the Content group.

Content

Text: the button label.

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a. Leave it empty to keep the button as a div.

Open in new tab: opens the link in a new tab when enabled. Shown when Href is set.

Icons

Include left icon: adds a left icon when enabled.

Left icon: the left icon image. Shown when Include left icon is enabled.

Left icon size: shown when Include left icon is enabled.

Include right icon: adds a right icon when enabled.

Right icon: the right icon image. Shown when Include right icon is enabled.

Right icon size: shown when Include right icon is enabled.

Spark controls

Dimensions: determines the width of the spark.

Animation duration

Color: the color of the spark.

Path color: determines the outer outline color that will serve as a path for the spark.

How it works

Ripple Button v2 is not nestable. It has 2 available types: From top or From bottom. Both of them are showcased at the demos.

The button admits different titles at top and bottom states. The longest title will determine button dimensions.

Ripple Type: From bottom or From top. Just like the demos.

Content

HTML tag: a by default. Custom tag appears when HTML tag is set to custom.

Href: the URL of the button. Shown when HTML tag is a.

Target blank: opens the link in a new tab when enabled. Shown when HTML tag is a.

Top Ripple

Title: the title shown on the top state.

Bottom Ripple

Title: the title shown on the bottom state.

Scale Animation controls

Scale: determines the scale to apply on hover. The demo uses 1.1.

Duration

Delay

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Translate Animation controls

Text translate: determines the intensity of the text translation. The demo uses 15px.

Duration

Delay

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Text Rotate Animation controls

Text rotate: determines the intensity of the text rotation. The demo uses 90deg.

Duration

Delay

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Arrow Icon is not nestable. It is an element designed to be used at dropdown elements, that is why it has accesibility controls. But it can be used also at any other context by setting a custom trigger in Toggle selector.

There are 5 arrow icons available: Arrow 1, Arrow 2, Angle, Angles and Fancy. The demo uses Arrow 2.

Arrow Icon has several animations that can be combined, disabled and customized at pleasure: Scale animation, Rotate animation and Double arrow animation.

Content

HTML tag: div by default. Custom tag appears when HTML tag is set to custom.

Custom tag: shown when HTML tag is set to custom.

Toggle selector (empty = this icon): the classname of a custom trigger. Leave it empty to use this icon as the trigger.

Event: Hover or Click.

Toggled by default: if enabled, the icon starts in its toggled state. Shown when Event is Click.

Close when clicking outside: if enabled, clicking outside closes the toggle. Shown when Event is Click.

Close when pressing ESC: if enabled, pressing ESC closes the toggle.

Arrow

Icon: Arrow 1, Arrow 2, Angle, Angles or Fancy.

Color

Weight

Size (scale)

Rotate

Scale animation

Enable animation: if enabled, the scale animation is included.

Scale: shown when Enable animation is enabled.

Duration: shown when Enable animation is enabled.

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Delay: shown when Enable animation is enabled.

Double arrow animation

Enable animation: if enabled, the double arrow animation is included.

Distance between arrows: shown when Enable animation is enabled.

Duration: shown when Enable animation is enabled.

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Delay: shown when Enable animation is enabled.

Rotate animation

Enable animation: if enabled, the rotate animation is included.

Rotate: shown when Enable animation is enabled.

Duration: shown when Enable animation is enabled.

CSS Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Delay: shown when Enable animation is enabled.