<section class="container">
  <h1>Slide text on hover animation</h1>
  <button data-hover="click me!"><div>Hover me!</div></button>
  
  <p>
    Twitter @
    <a href="https://twitter.com/MadsBHaakansson">MadsBHaakansson</a>
  </p>
</section>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,800);

*, *:before, *:after{
  box-sizing: border-box;
  padding: 0; margin: 0;
  font: 300 1em/1.5 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  color: #111;
}

html, body{background: rgb(236, 240, 241);}

  section.container{
    min-width: 500px;
    margin: 10% auto;
    text-align: center;
  }
    a:hover{border-bottom: 1px solid #111;} 
    h1{font-size: 2em; padding: 20px 0;}
    p{
      font-size: .75em;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 20px 0;
    }

    button:hover{cursor: pointer}
    button {
      background: transparent; outline: none;
      position: relative;
      border: 2px solid #111;
      padding: 15px 50px;
      overflow: hidden;
    }

    /*button:before (attr data-hover)*/
    button:hover:before{opacity: 1; transform: translate(0,0);}
    button:before{
      content: attr(data-hover);
      position: absolute;
      top: 1.1em; left: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-weight: 800;
      font-size: .8em;
      opacity: 0;
      transform: translate(-100%,0);
      transition: all .3s ease-in-out;
    }
      /*button div (button text before hover)*/
      button:hover div{opacity: 0; transform: translate(100%,0)}
      button div{
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 800;
        font-size: .8em;
        transition: all .3s ease-in-out;
      }