Animated underline button
HTML
<br/>
<br/>
<div class="the_list_item_action"><a href="#">BUTTON</a></div>
CSS
.the_list_item_action a{
background: #b50422 !important;
padding: 1rem !important;
position: relative !important;
color: #fff !important;
text-transform: uppercase !important;
border-radius: 0 !important;
}
.the_list_item_action a:after {
opacity: 0 !important;
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: -10px !important;
width: 0 !important;
height: 15px !important;
color: #fff !important;
background-color: #000 !important;
-webkit-transition: all 0.2s !important;
-moz-transition: all 0.2s !important;
-o-transition: all 0.2s !important;
transition: all 0.2s !important;
}
.the_list_item_action a:hover {
color: #fff !important;
}
.the_list_item_action a:hover:after {
opacity: 1.0 !important;
width: 100% !important;
}
