# Links
Cirrus provides a variety of styles for links to choose from. Styles range from the original plain style to a bunch of specially designed links with transitions and animations.
<div>
<a href="#">I am just an ordinary link</a>
</div>
<div>
<a href="#" class="u u-LR">Hover me</a>
</div>
<div>
<span class="usquare">
<a href="#" class="utb utb-OLR">I am a square</a>
</span>
</div>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.
<span class="usquare">
<a href="#" class="utb utb-OLR">I am a square</a>
</span>Delayed Square
Animated link with sequentially drawn borders.
<span class="usquare delay">
<a href="#" class="utb utb-OLR">I am a square</a>
</span>