Hello developers, today in this blog you will learn to create an Iconbar with Hover Animation using HTML & CSS.
Navigation Bar is the most important UI element of the website for visitors or content viewers to find their required information or the page from the website. A website navigation bar is the most commonly represented as a horizontal list of links at the top of every page.
In this blog (Iconbar with Hover Animation), on the webpage, the icons are on the horizontal bar. The icons in the horizontal bar are Home, Message, Profile, Comment, and Purchase icons. The hover animation has been used in these icons. If you hover over the icon, the background color of the icon changes to a particular extent with the CSS border-radius property.
The source code of this Iconbar with Hover Animation using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Iconbar with Hover Animation using HTML & CSS on your projects.
Iconbar with Hover Animation using HTML & CSS [Source Code]
To make this website (Iconbar with Hover Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #F2994A;
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);
background: linear-gradient(to right, #F2C94C, #F2994A);
}
.icon-bar {
margin-top: 20%;
width: 600px;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 50px;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: #555;
font-size: 36px;
}
.icon-bar a:hover {
background: #12192c;
color: #fff;
border-radius: 50px;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
margin-top: 10px;
}
Thank you for reading our blog. If you face any problem in creating this Iconbar with Hover Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team