CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Button Slide Effect

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

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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:

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.