How to create animated banner links using HTML and CSS?

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:  
 
sagartomar9927
CSS-Advanced
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS