How to create animated banner links using HTML and CSS?
Last Updated :
09 Jul, 2021
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.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Animated Link</title>
</head>
<body>
<a href="#">GeeksforGeeks</a>
</body>
</html>
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.
CSS
a{
position: absolute;
top: 50%;
left:50%;
padding: 15px 0;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #262626;
border-top: 2px solid #262626;
border-bottom: 2px solid #262626;
letter-spacing: 2px;
transition: .5s;
}
a:hover{
letter-spacing: 10px;
}
Complete Code: It is the combination of the above two sections of code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Animated Link</title>
<style>
a{
position: absolute;
top: 50%;
left:50%;
padding: 15px 0;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #262626;
border-top: 2px solid #262626;
border-bottom: 2px solid #262626;
letter-spacing: 2px;
transition: .5s;
}
a:hover{
letter-spacing: 10px;
}
</style>
</head>
<body>
<a href="#">GeeksforGeeks</a>
</body>
</html>
Output:
