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

*, *:before, *:after{
  box-sizing: border-box;
  padding: 0; margin: 0;
  color: #aaa8a9;/*文字の色*/
}



  section.container{
    min-width: 500px;
    margin: 10% auto;
    text-align: center;
  }
    a:hover{border-bottom: 1px solid #aaa8a9;} 
    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 #aaa8a9;/*枠の色*/
      padding: 8px 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;
      }