Create Hover Border Animation CSS3
Create Hover Border Animation using CSS3. In this article, we are creating Hover Border Animation Using CSS3 and HTML. You can use this animation for the navigation menu, as a mouse hover effect or any HTML element that you wanted to show the hover border. So when mouse takes over the element you will see this border animation. This animation starts in the middle and ends on both sides. When you move your cursor from the element the reverse effect will happen.
Well, above image will show you what we are creating in this article. The best thing is that you can use this animation anywhere for your navigation menu item, for headings and those texts which you wanted to highlight.
So let me show you how to create this Hover border animation using CSS3.
Create Index.html and Style.css
Well, to create this two file you need an editor. The Developer will choose the different editor as per his choice. Whatever you choose for an editor but I will suggest a visual code editor. This editor is simple and you can create a thousand line of code within a minimum time. Install visual code editor and create the empty folder on the desktop. Open this folder in the editor.
In that folder or you can say in this project create two files. First one is index.html and Style.css. In the index.html file, we insert some HTML element and create the design. Style.css file is created for styling and making the hover effect animation.
In index.html create simple HTML5 snippets which contain head, title, and body. Now in the body section, we insert some HTML element that creates hover animation. Look at the code first.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Style.css">
<a href="#" class="hover-border">Hover</a>
- In the above code we link Style.css file in the head section first. Don’t forget to link this file otherwise style will not apply to HTML elements.
- In the body, tag creates two HTML element. Create a division tag with text-center class. So basically we use this class to center text. After that create the anchor tag with hover-border class and add hover text. You can specify any text for this anchor tag.
- Now you are done with the index.html file. Now let me show you what is inside of Style.css file.
In style.css we create some classes to create hover border animation. If you run your index.html file you don’t see anything because we do not create any style for the HTML element. Now let’s see what we are inserting in the Style.css to create this amazing animation.
background: #7F7FD5; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EC6EAD, #3494E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
bottom: 0%; left: 50%;
transition: all 500ms ease;
Let me give you the explanation of the above code.
- We first apply background gradient to the body tag. This will create a gradient background color in the background.
- Then create text center class. This class is created for the center of the text. So we just using CSS property text-align to horizontally center the element and add margin to center element vertically.
- Create hover-border class and apply some CSS properties like font family, font size, text-decoration property to remove the border from the anchor tag position relative and specify color white.
- Now the most important part create after selector for the hover-border class and insert a border. So we had created some CSS properties to insert a border just after the anchor tag.
- In the last, we create hover-border hover effect. This effect will apply only when you take your mouse over the specified element. In this hover effect, we just increase the width of the border and also change the left property. So we specify left property to 0% and width property to 100%.
That’s it. run the index.html file and see what will happen. Just move your mouse cursor over the anchor tag and then you will see the border animation. You can change the border color, height and many other properties that is all depends on you.
Experiment with this example. Don’t copy the provided code. Just type it and memories it. This will increase your programming skills.
That is all for this tutorial. Follow us on Youtube for more information.