Hey everyone, I'm currently working on creating a circular button navigation for my website. I want to have 4 buttons, each with a different color, and I want them to glow when the user hovers over them. So far, this is what I have in my HTML:
HTML:
<nav id="main-menu">
<ul>
<li class="model-icon a-color hvr-glow">
</li>
<li class="model-icon b-color hvr-glow">
</li>
<li class="model-icon c-color hvr-glow">
</li>
<li class="model-icon d-color hvr-glow">
</li>
</ul>
</nav>
#main-menu > ul > li {
margin: 0 5px;
width: 50px;
height: 50px;
cursor: pointer;
}
.a-color {
background-color: Yellow;
}
.b-color {
background-color: Red;
}
.c-color {
background-color: White;
}
.d-color {
background-color: Green;
}
Currently, I'm facing an issue where there is no glow effect and the buttons are appearing as square boxes instead of circles.
Once I figure this out, I plan to add SVG images in the center of each button using this site
But for now, I'm focused on getting the buttons to transform into circles and glow when hovered over.
Thank you!