#Styles

Extended
Style

Links themselves come with default styling within the framework. However, there are a lot of classes that can be used to customize its hover behavior.

Types

Standard

A standard link with only a color transition.

<a href="!#">Standard</a>

Underline

A link with underlined text.

<a href="!#" class="underline">Underline</a>

Underline Animation (Left to Right)

Animated underlined link with a transition from left to right.

<a href="!#" class="u u-LR">Left to Right</a>

Underline Animation (Right to Left)

Animated underlined link with a transition from right to left.

<a href="!#" class="u u-RL">Right to Left</a>

Underline Animation (Center)

Animated underlined link with a transition from the center.

<a href="!#" class="u u-C">Center</a>

Outline Animation (Left to Right)

Animated outlined link with a transition from left to right.

<a href="!#" class="utb utb-LR">Left to Right</a>

Outline Animation (Right to Left)

Animated outlined link with a transition from right to left.

<a href="!#" class="utb utb-RL">Right to Left</a>

Outline Animation (Center)

Animated outlined link with a transition from the center.

<a href="!#" class="utb utb-C">Center</a>

Opposite Transitions (L -> R / R -> L)

Animated outlined link with a transition with the top moving left to right and the bottom right to left. Keep in mind that the class name refers to the direction of movement of the top border.

<a href="!#" class="utb utb-OLR">Look at me</a>

Opposite Transitions (R -> L / L -> R)

Animated outlined link with a transition with the top moving right to left and the bottom left to right. Keep in mind that the class name refers to the direction of movement of the top border.

<a href="!#" class="utb utb-ORL">Crisscross</a>

Square

Animated link with simultaneously drawn borders.

<a href="!#" class="utb utb-OLR">I am a square</a>

Delayed Square

Animated link with sequentially drawn borders.

<a href="!#" class="utb utb-OLR">I am a square</a>