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 Animated Blur Navbar using CSS?
- How to create custom banner background 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 Navigation Links using HTML5 ?
- jQuery | animated Selector with Example
- How to add Announcement Banner in New Google Sites ?
- CSS | Links
- HTML | Links
- HTML | DOM links Collection
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- How to create Glowing Star effect using HTML and CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.