Nav bar #2

by Trina Lu

HTML

<script src="https://use.fontawesome.com/8a5a0d373e.js"></script>
<ul>
  <li class="social-btn active">
    <i class="fa fa-facebook-official" aria-hidden="true"></i>
  </li><li class="social-btn">
    <i class="fa fa-twitter" aria-hidden="true"></i>
  </li><li class="social-btn">
    <i class="fa fa-github" aria-hidden="true"></i>
  </li><li class="social-btn">
    <i class="fa fa-rss" aria-hidden="true"></i>
  </li>
</ul>

CSS

ul {
  background: #525252;
  padding: 0;
}

.social-btn {
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  padding: 20px;
  vertical-align: bottom;
  font-size: 20px;
  position: relative;
  color: #7f8c88;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.social-btn:after {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 3px;
  content: "";
  left: 0;
  /* left: 50%; */
  /* transform: translate(-50%, 0); */
  background: #00ca93;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.social-btn.active,
.social-btn:hover {
  color: #00ca93;
}
.social-btn.active:after,
.social-btn:hover:after {
  width: 100%;
}

JavaScript

var btns = $(".social-btn");
btns.click(function(e){
	$(this).addClass("active").siblings(".social-btn").removeClass("active");
});