Untitled

<nav>

  <ul>

    <li>

      <a href="#">

        <span>Like what you see?</span>

        <span>We can do it for you!</span>

      </a>

  </li>

    <li>

      <a href="#">

        <span>Want to learn more?</span>

        <span>Send us an email :)</span>

      </a>

  </li>

  </ul>

</nav>

* {

  padding: 0;

  margin: 0;

}

ul {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 320px;

  height: 30px;

  margin: -15px 0 0 -160px;

  list-style: none;

  font: .75em "lucida grande", arial, sans-serif;

}

a {

  position: absolute;

  width: 150px;

  height: 100%;

  text-decoration: none;

}

a span {

  position: absolute;

  width: 100%;

  text-align: center;

  line-height: 30px;

}

li:first-child a {

  color: #000;

  background: #f0f0f0;

}

li:first-child span {

  -webkit-transition: opacity .4s linear;

  -moz-transition: opacity .4s linear;

  -o-transition: opacity .4s linear;

  -ms-transition: opacity .4s linear;

  transition: opacity .4s linear;

}

li:first-child span:first-child,li:first-child a:hover span + span {

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter: alpha(opacity=100);

  opacity: 1;

}

li:first-child span + span,li:first-child a:hover span:first-child {

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

  opacity: 0;

}

li + li a {

  overflow: hidden;

  right: 0;

  color: #fff;

}

li + li span {

  -webkit-transition: top .3s ease-out;

  -moz-transition: top .3s ease-out;

  -o-transition: top .3s ease-out;

  -ms-transition: top .3s ease-out;

  transition: top .3s ease-out;

}

li + li span:first-child {

  background: #333;

  top: 0;

}

li + li span + span {

  background: #39f;

  top: 30px;

}

li + li a:hover span:first-child {

  top: -30px;

}

li + li a:hover span + span {

  top: 0;

}