⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

Button Slide Effect

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

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

The Button Slide Effect is a modifier of the .btn component, and it 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

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.