We’d like to explore a very subtle When you hover over on buttons, you will see an animation happening it’s by adding hover effect for navigation button: the grid item becomes transparent and the border lines of each side animate, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans without any JS. As when you go to https://wbcomdesigns.com/contact/ you will hover the cursor over subscriber button.
HTML strucutre
<nav> <ul class="nav-ul"> <li class="nav-li"> <a href="#">Main</a> </li> <li class="nav-li"> <a href="#">About</a> </li> <li class="nav-li"> <a href="#">Projects</a> </li> <li class="nav-li"> <a href="#">Contacts</a> </li> </ul> </nav>
CSS Codes to add dedicated style
a { color: inherit; text-decoration: none; outline: none; } .list-unstyled { padding: 0; margin: 0; list-style: none; } * { box-sizing: border-box; } html { background: #defbfd; } nav { height: 100%; font-family: 'MuseoSansCyrl', sans-serif; color: #3a3a3a; } nav .nav-ul { padding: 0; margin: 0; list-style: none; margin: 2.9375rem 2.3125rem 0; text-align: center; } nav .nav-li { display: inline-block; font-size: 1em; } nav .nav-li a { position: relative; display: block; margin: 0 2px; padding: 0.625rem 1.25rem; text-transform: uppercase; overflow: hidden; } nav .nav-li a:before { box-sizing: border-box; transform: translateX(100%); content: ''; position: absolute; bottom: 0; left: 0; width: 99.5%; height: 2px; border-bottom: 2px solid transparent; border-left: 2px solid transparent; } nav .nav-li a:after { box-sizing: border-box; transform: translateX(-100%); content: ''; position: absolute; top: 0; left: 0; width: 99.5%; height: 2px; border-top: 2px solid transparent; border-right: 2px solid transparent; } nav .nav-li a:hover { color: inherit; text-decoration: none; } nav .nav-li a:hover:before { transition: .1s transform linear, .1s height linear .1s; transform: translateX(0); height: 100%; border-color: #1fbfac; } nav .nav-li a:hover:after { transition: .1s transform linear .2s, .1s height linear .3s; transform: translateX(0); height: 100%; border-color: #1fbfac; }