How to create animated banner links using HTML and CSS?

Links are one of the most important parts of any component that is used in website making. Almost every component had some form of links in it. A common example is a menu/nav-bar. All we see is some button like home, about, etc. but under the hood they all are links. Sometimes there comes a situation where you don't want to wrap the link inside a button. So, in that case, the banner link can be really useful. It has a really simplistic look and animation which makes it easy to design and implement and it also looks great because of it's a simple and clean design. 
Approach: The approach is to give some border around the link and then elongating the whole link on mouse-hover. Now, there are many ways to implement the same but we will be manipulating letter-spacing to achieve our goal. 
HTML Code: In this section, we have created a simple link which take us to no-where. You should add your desired link in the href attribute of the tag. 
 

CSS Code: For CSS, follow the below given steps. 
 

• Step 1: Apply some basic styling link font-size, font-family etc.
• Step 2: Apply top and bottom border of any color and width.
• Step 3: Use hover selector and increase the letter spacing.

Note: The letter spacing should be increased atleast 2-3 times of the original value of letter-spacing. 
 

Complete Code: It is the combination of the above two sections of code. 
 

Output: