Hyperlink – a Tag Design in HTML

This tutorial provides the codes to do some basic customizations to your website links. The tutorial includes different css to design the link and transition effect when clicked, hovered.

Underlined Links are more connected and look more technical while adding a border gives more space to the link and offers a better visual and design.

Here are the codes I use the most with the basic CSS to get started.

a {
    color: #0066ff;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:focus, a:hover {
    color: #333;
    text-decoration: none;
}

Type 1. Border Bottom Link

<a class="border-link" href="/">This is a link</a>

a.border-link {
    border-bottom: 2px solid rgba(50, 115, 220, 0.1);
    padding-bottom: 2px;
}

a.border-link:hover {
    border-bottom-color: #0066ff;
}

Type 2. Box-shadow Link Effect

<a class="inset-link" href="/">This is a shaodw link</a>
<br>

a.inset-link {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(255 191 80 / 50%),
    0 2px 0 rgb(255 191 80 / 50%);
  transition: box-shadow 0.3s;
  color: inherit;
  overflow: hidden;
}
a.inset-link:hover {
  box-shadow: inset 0 -30px 0 rgb(255 191 80 / 50%),
    0 2px 0 rgb(255 191 80 / 50%);
  color: #333;
}

Type 3. Animated Border

<a class="animate-link" href="/">This link will animate with a border bottom</a>

.animate-link {
    display: inline-block;
    color: #333;
    text-decoration: none;
}
.animate-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #333;
    transition: width .3s;
}

.animate-link:hover::after {
    width: 100%;
    transition: width .3s;
}

Type 4. Transform Border Height

<a class="transform-link" href="/">This link will transform with a border bottom</a>

.transform-link {
    position: relative;
    width: auto;
         padding-top: 10px;
    padding-bottom: 10px;
}

 a.transform-link::before {
    bottom: 9px;
    content: '';
    position: absolute;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #333;
    transition: transform .6s cubic-bezier(.25,1,.5,1);
    transform: translate(-50%) scaleX(0);
    opacity: .5;
}

 a.transform-link:hover::before {
    transform: translate(-50%) scaleX(1);
}

Bonus: Customize External Links

We can also customize the external links to have an icon right after the link to get the links more visually separated and understandable. Here is the one I use on my websites.

<a class="blank-link" href="/" target="_blank" rel="nofollow noopener">I will open in a new Tab</a>
<br>

a.blank-link[target=_blank]:after {
    content: "↗";
    font-size: 1em;
    margin-left: .2em;
    margin-right: .2em;
}

You can combine this with any of the one Type of  the link effects and make it look cooler. 🙂

Unicode characters like U+2197 will show differently based on the typeface. One can also use UTF symbols and CSS entities which we will cover in upcoming tutorials.