How to create animated banner links using HTML and CSS? Last Updated : 09 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to create a animated pill shaped button using HTML and CSS ? S sirohimukul1999 Follow Improve Article Tags : Web Technologies Web Templates CSS-Advanced Similar Reads How to create Animated bars using HTML and CSS? Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound. Approach: The approach is to use unordered list to create bars and then animate them using keyframes. 2 min read How to Create an Animated Search Box using HTML and CSS ? The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obt 2 min read How to create a animated pill shaped button using HTML and CSS ? Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activate 4 min read How to create a progress bar animation using HTML and CSS ? In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi 3 min read How to Create Text Color Animation using HTML and CSS ? The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered <div> containing an <h2> element.Use CSS to reset default 1 min read How to Create Animated Loading Button using CSS? An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A 3 min read Like