Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create animated banner links using HTML and CSS?

Improve Article
Save Article
  • Last Updated : 09 Jul, 2021
Improve Article
Save Article

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: 
 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!