Colored links | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Colored Links

#### Link colors

Show Code

You can use the `.link-*` classes to colorize links. Unlike the `.text-*` classes, these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

    <p><a href="#" class="link-primary">Primary link</a></p>

    <p><a href="#" class="link-secondary">Secondary link</a></p>

    <p><a href="#" class="link-success">Success link</a></p>

    <p><a href="#" class="link-danger">Danger link</a></p>

    <p><a href="#" class="link-warning">Warning link</a></p>

    <p><a href="#" class="link-info">Info link</a></p>

    <p><a href="#" class="link-light">Light link</a></p>

    <p><a href="#" class="text-body">Dark link</a></p>

    <p><a href="#" class="link-body-emphasis mb-0">Emphasis link</a></p>

#### Link utilities

Show Code

Colored links can also be modified by our link utilities.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

    <p><a href="#" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>

    <p><a href="#" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>

    <p><a href="#" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>

    <p><a href="#" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>

    <p><a href="#" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>

    <p><a href="#" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>

    <p><a href="#" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>

    <p><a href="#" class="text-body link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>

    <p><a href="#" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-75-hover mb-0">Emphasis link</a></p>

#### Link Opacity

Show Code

Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

    <p><a class="link-opacity-10" href="#">Link opacity 10</a></p>

    <p><a class="link-opacity-25" href="#">Link opacity 25</a></p>

    <p><a class="link-opacity-50" href="#">Link opacity 50</a></p>

    <p><a class="link-opacity-75" href="#">Link opacity 75</a></p>

    <p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

#### Link Opacity Hover

Show Code

You can even change the opacity level on hover.

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

    <p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>

    <p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>

    <p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>

    <p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>

    <p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>

#### Underline color

Show Code

Change the underline’s color independent of the link text color.

Primary underline

Secondary underline

Success underline

Danger underline

Warning underline

Info underline

Light underline

Dark underline

    <p><a href="#" class="text-decoration-underline link-underline-primary">Primary underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-secondary">Secondary underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-success">Success underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-danger">Danger underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-warning">Warning underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-info">Info underline</a></p>

    <p><a href="#" class="text-decoration-underline link-underline-light">Light underline</a></p>

    <p class="mb-0"><a href="#" class="text-decoration-underline link-underline-dark">Dark underline</a></p>

#### Underline opacity

Show Code

Change the underline’s opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

    <p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>

    <p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>

    <p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>

    <p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>

    <p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>

    <p class="mb-0"><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

#### Underline offset

Show Code

Change the underline’s distance from your text. Offset is set in `em` units to automatically scale with the element’s current `font-size`.

Default link

Offset 1 link

Offset 2 link

Offset 3 link

    <p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>

    <p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>

    <p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>

    <p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>

    <p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>

    <p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three