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.
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 orginal value of letter-spacing.
Complete Code: It is the combination of the above two sections of code.
- How to Create Animated Loader Ring using HTML and CSS?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to create Animated bars using HTML and CSS?
- How to create custom banner background using CSS ?
- How to create Animated Blur Navbar using CSS?
- How to create Right Aligned Menu Links using HTML and CSS ?
- How to Create Animated Background using CSS3 ?
- How to Create Animated Typing Effect using typed.js ?
- How to create Animated accordion using Google AMP amp-accordion ?
- How to Create Navigation Links using HTML5 ?
- How to add Announcement Banner in New Google Sites ?
- CSS | Links
- jQuery | animated Selector with Example
- HTML | Links
- HTML | DOM links Collection
- How to set cursor style to pointer for links without href ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.