Skip to content
Related Articles

Related Articles

Improve Article

How to create animated banner links using HTML and CSS?

  • Last Updated : 09 Jul, 2021
Geek Week

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: 
 

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :