Marking navigation button as active using CSS - html

Question

I have square navigation buttons where I want to visually show which are active, for example using:
At the moment I use background: linear-gradient for this purpose. This however is hard to animate and I therefore am looking for alternatives. The HTML structures looks like:
<div class='navigation-button'>
<div class='navigation-button-container'>
<i class='fa fa-bars'></i>
</div>
</div>
with corresponding CSS:
.navigation-button {
width: 50px;
height: 50px;
background: purple;
}
.navigation-button-container {
width: 100%;
height: 100%;
text-align: center;
}
.navigation-button-container i {
margin-top: 25%;
margin-bottom: 25%;
color: white;
}
.active {
background: linear-gradient(right, blue 0%, blue 10%, rgba(0,0,0,0) 10%);
}
The active class can be applied to the navigation-button-container to get the desired effect. I want to however fade this in and out and as I understand linear-gradients cannot be animated.
I have looked in adding a element before the navigation-button-container and animate it's width and using the CSS ::before syntax but neither seemed to be of help. Is there an efficient CSS way to get the desired effect using #keyframes or transition?

Answer 1

Is this what you needed? There is a ::before pseudo-element on .nb-container which has a width transition.
.nb {
background-color: #f00;
display: block;
height: 50px;
width: 50px;
}
.nb-container {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.nb-container i {
color: white;
display: inline-block;
margin: 25% 0 25%;
}
.nb-container ::before {
background-color: #00f;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width .2s;
width: 0;
}
.nb-container:hover ::before, .nb-container:focus ::before {
width: 20%;
}
Mouse over the elements to see the effect:
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">∆</i>
</div>
</div>
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">®</i>
</div>
</div>
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">©</i>
</div>
</div>
The ::before element is very versatile in the way it can be animated. So if you wanted a fade-in instead of a slide-in:
.nb {
background-color: #f00;
display: block;
height: 50px;
width: 50px;
}
.nb-container {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.nb-container i {
color: white;
display: inline-block;
margin: 25% 0 25%;
}
.nb-container ::before {
background-color: #00f;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity .2s;
width: 20%;
}
.nb-container:hover ::before, .nb-container:focus ::before {
opacity: 1;
}
Mouse over the elements to see the effect:
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">∆</i>
</div>
</div>
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">®</i>
</div>
</div>
<div class="nb">
<div class="nb-container">
<i class="fa fa-bars">©</i>
</div>
</div>