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: . 5 s;
}
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...