<ul>
  <li>
    <a href="https://twitter.com">
      <span>Twitter</span>
      <svg class="svg-image" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					 viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
				<path d="M20,1C9.5,1,1,9.5,1,20s8.5,19,19,19s19-8.5,19-19S30.5,1,20,1z M30,14.9c0,0.2,0,0.4,0,0.7
					c0,6.8-5.2,14.7-14.7,14.7c-2.9,0-5.6-0.9-7.9-2.3C7.8,28,8.2,28,8.6,28c2.4,0,4.6-0.8,6.4-2.2c-2.3,0-4.2-1.5-4.8-3.6
					c0.3,0.1,0.6,0.1,1,0.1c0.5,0,0.9-0.1,1.4-0.2c-2.4-0.5-4.1-2.6-4.1-5.1c0,0,0,0,0-0.1c0.7,0.4,1.5,0.6,2.3,0.6
					c-1.4-0.9-2.3-2.5-2.3-4.3c0-0.9,0.3-1.8,0.7-2.6c2.5,3.1,6.4,5.2,10.6,5.4c-0.1-0.4-0.1-0.8-0.1-1.2c0-2.9,2.3-5.2,5.2-5.2
					c1.5,0,2.8,0.6,3.8,1.6c1.2-0.2,2.3-0.7,3.3-1.3c-0.4,1.2-1.2,2.2-2.3,2.9c1-0.1,2-0.4,3-0.8C31.9,13.2,31,14.1,30,14.9z"/>
				</svg>
    </a>
  </li>
  <li>
    <a href="https://github.com">
      <span>Github</span>
      <svg class="svg-image" version="1.1" id="Github" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20,1.5C9.5,1.5,1,10,1,20.5c0,8.4,5.4,15.5,13,18c1,0.2,1.3-0.4,1.3-0.9
	c0-0.5,0-1.6,0-3.2c-5.3,1.1-6.4-2.5-6.4-2.5C8,29.6,6.8,29,6.8,29c-1.7-1.2,0.1-1.2,0.1-1.2c1.9,0.1,2.9,2,2.9,2
	c1.7,2.9,4.4,2.1,5.5,1.6c0.2-1.2,0.7-2.1,1.2-2.5c-4.2-0.5-8.7-2.1-8.7-9.4c0-2.1,0.7-3.8,2-5.1C9.6,13.9,9,12,10,9.3
	c0,0,1.6-0.5,5.2,1.9c1.5-0.4,3.1-0.6,4.8-0.6c1.6,0,3.2,0.2,4.8,0.6C28.4,8.8,30,9.3,30,9.3c1,2.6,0.4,4.5,0.2,5c1.2,1.3,2,3,2,5.1
	c0,7.3-4.4,8.9-8.7,9.4c0.7,0.6,1.3,1.7,1.3,3.5c0,2.5,0,4.6,0,5.2c0,0.5,0.3,1.1,1.3,0.9c7.5-2.5,13-9.6,13-18
	C39,10,30.5,1.5,20,1.5z"/>
</svg>
    </a>
  </li>
  <li>
    <a href="https://codepen.io">
      <span>Codepen</span>
      <svg class="svg-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
					<polygon points="21,24.1 21,28.9 28.9,23.6 25.4,21.2 		"/>
					<polygon points="11.1,23.6 19,28.9 19,24.1 14.6,21.2 		"/>
					<polygon points="10.3,18.3 10.3,21.7 12.8,20 		"/>
					<polygon points="20,17.6 16.4,20 20,22.4 23.6,20 		"/>
					<polygon points="19,15.9 19,11.1 11.1,16.4 14.6,18.8 		"/>
					<polygon points="28.9,16.4 21,11.1 21,15.9 25.4,18.8 		"/>
					<path d="M20,1C9.5,1,1,9.5,1,20s8.5,19,19,19c10.5,0,19-8.5,19-19S30.5,1,20,1z M31.7,23.6c0,0,0,0.1,0,0.1c0,0,0,0,0,0
						c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0-0.1,0.1
						c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0,0,0l-10.7,7.2c-0.3,0.2-0.8,0.2-1.1,0L8.7,24.4c0,0,0,0,0,0c0,0,0,0,0,0
						c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1
						c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1v-7.2c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0,0,0,0
						c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0.1-0.1c0,0,0,0,0,0c0,0,0,0,0.1,0
						c0,0,0,0,0,0c0,0,0,0,0,0l10.7-7.2c0.2-0.1,0.4-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2l10.7,7.2c0,0,0,0,0,0c0,0,0,0,0,0
						c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1
						c0,0,0,0,0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1V23.6z"/>
					<polygon points="29.7,21.7 29.7,18.3 27.2,20 		"/>
				</svg>
    </a>
  </li>
</ul>
$green: #1ab48e;
$white: #ffffff;
$black: #000000;

body {
  font-family: sans-serif;
  background-color: $green;
  padding-top: 70px;
}


ul {
  width: 80%;
  margin-left: 10%;

  li {
    width: 33.333%;
    float: left;
    position: relative;
    &:first-child a {
      border: 0;
      border-radius: 2px 0px 0px 2px;
    }
    &:last-child a {
      border-radius: 0px 2px 2px 0px;
    }
    svg {
      max-width: 60px;
      fill: darken($green, 8%);
      transition: fill 200ms ease;
    }
    span {
      position: absolute;
      display: block;
      opacity: 0;
      top: 0px;
      left: 5%;
      background-color: $white;
      width: 90%;
      padding: 8px 0;
      color: $green;
      border-radius: 2px;
      transition: all 200ms ease-in-out;
      &:after {
        content: '';
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid $white;
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -8px;
      }
    }
    a {
      text-decoration: none;
      display: block;
      text-align: center;
      background-color: $white;
      padding: 20px 0;
      border-left: 1px solid darken($white, 8%);
      transition: all 200ms ease;
      &:hover {
        background-color: $black;
        transition: all 200ms ease;
        svg {
          fill: $white;
          transition: fill 200ms ease;
        }
        span {
          opacity: 1;
          top: -45px;
          transition: all 200ms ease;
        }
      }
		}
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js