Button Slide Effect

A button with an animated background that slides-in on :hover.

How to

The Button Slide Effect allows you to add an animated 'sliding-in' background to your buttons.

The component auto-detects the origin direction of the pointer and adapts the animation accordingly. If you prefer to have the sliding animation have a single direction (e.g., from left to right), remove the .js-btn--slide-fx class and add one of the following classes:

• (no class - default direction is from left to right)
• .btn--slide-fx-from-right
• .btn--slide-fx-from-bottom
• .btn--slide-fx-from-top

For the No Framework version, use the following classes: 

• .cd-btn--slide-fx-from-right
• .cd-btn--slide-fx-from-bottom
• .cd-btn--slide-fx-from-top

Categories

• Effects > Controls

Bug report & feedback

Component Github page ↗