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 orginal value of letter-spacing.
Complete Code: It is the combination of the above two sections of code.