Button Slide Effect
A button with an animated background that slides-in on :hover.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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)