Buttons

Buttons are one of Shock’s richest components Hot. Every button combines a base style, a shape, an optional animation, and a color from your palette — mix and match to get exactly the call-to-action you want.

Super buttons

Expressive buttons built around an animated arrow or icon — great for primary actions.

• Directions: left arrow, right arrow, and cross variants.
• Text animations: simple, underline, hover-underline, animated text, and magnetic.
• Movement: simple, move-up, and move-up-down on hover.

Arrow button — scheme + color

<a href="#your-link" class="button arrow-button next scheme-1 primary">
<span class="arrow">
  <span class="item"></span>
  <span class="item"></span>
</span>
<span class="line"></span>
<span class="text">GET STARTED</span>
</a>

Filled buttons

Solid buttons in three shapes, each with several interaction styles.

• Shapes: square, rounded, pill.
• Animations: simple, collision, rotated text, move-up, move-up-down, magnetic.
• Duocolor: two-tone fills for extra emphasis.

Filled shadow button with hover animation

<a href="#your-link" class="button shadow black primary-hover hover-up-down">
<span class="button-text white-75 white-hover">Move Up Down</span>
<i class="fa-solid fa-arrow-right button-icon white-75 white-hover"></i>
</a>

Outlined buttons

The same structure as filled buttons, but with a colored outline and transparent center.

• Shapes: square, rounded, pill.
• Animations: the full filled-button set.
• Duocolor: two-tone outlines.

Swap the shadow/fill classes for the outline variant and keep the same shape and animation classes.

Shape + animation + color

Think of a button as a recipe: pick one shape (square / rounded / pill), add an animation (hover-up-down, magnetic…), and finish with a color class (primary, secondary…).

For the surrounding layout options, see Layout and Colors.