Creating Underline Hover Effect for BRIZY Menu Module with CSS: Video Tutorial
You can add fun animated hover effects to the BRIZY Menu with CSS. It’s easier than you think and so fun to experiment with! In this tutorial, I’ll walk you step-by-step through the process, showing you how to create this effect on your own – and how to customize it so it can suit the style of your website and look fantastic.
The hover effect looks fun and easy – and it is also really easy to achieve. We’re going to use CSS pseudo-elements to add this effect and manipulate it using a few different CSS properties. First, we’ll have to find the right CSS selector for the task, then decide what our links should look like, and finally – how to achieve that animated hover effect. Hopefully, this explanation will make it clear how to do this – and also, how you can manipulate this effect in any way you want.
The CSS
/*-- underline menu hover --*/
nav.brz-menu > ul.brz-menu__ul > li.brz-menu__item > a.brz-a > .brz-span::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: #ffffff;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
nav.brz-menu > ul.brz-menu__ul > li.brz-menu__item > a.brz-a > .brz-span:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
