Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Getting started
Jose Tamu
June 3, 2025 /  Beginner /  CSS only

Arrow Button v7

Arrow Button v7 Arrow Button v7

How it works

Arrow Button v7 consists of a label and two arrows (the original and a duplicated one on hover). These parts of the button can be styled at pleasure.

Arrow Animation controls

Translate from: the distance where the arrow will come from.
Scale: applied to the arrow and the arrow’s circle on hover.
Duration
CSS easing: You can set any custom CSS easing of your own. Learn more about CSS easings here.

On this page