SOURCE

<div id="m_nav">
  <a href="#" class="active"><i></i><span>菜单1</span></a>
  <a href="#"><i></i><span>菜单2</span></a>
  <a href="#"><i></i><span>菜单3</span></a>
  <a href="#"><i></i><span>菜单4</span></a>
  <a href="#"><i></i><span>菜单5</span></a>
</div>

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
}

#m_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( 90deg, #673ab7, #783be6);
}

#m_nav a {
  position: relative;
  display: block;
  float: left;
  width: 20%;
  padding-top: 10px;
  height: 60px;
  text-align: center;
}

#m_nav a i {
  display: block;
  text-align: center;
  margin: 0 auto 5px;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, .6);
}

#m_nav a span {
  z-index: 2;
  position: relative;
  color: rgba(255, 255, 255, .6);
}

#m_nav a.active:before {
  content: "";
  position: absolute;
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-radial-gradient(50% 100%, farthest-side, rgba(196, 10, 228, .8), rgba(255, 255, 255, 0));
}

#m_nav a.active i {
  background: rgba(255, 255, 255, 1);
}

#m_nav a.active span {
  color: rgba(255, 255, 255, 1);
}