ホバーアニメーションに関しては、色々なライブラリがWEB上に落ちていますが、今回は自分でCSSのみで作成してみました。（CSSのアニメーションプロパティがうろ覚えだったので…）
ベタ塗りの背景色のボタンがホバーで斜めの背景が横から出てくるシンプルなアニメーションです。

■HTMLとCSS
【HMTL】

    <div class="animation">
      <a href="">READ MORE</a>      
    </div>

HTMLはこんな感じでa要素の上にdiv要素を入れているだけです。

【CSS】

.animation a{
  position: relative;
  font-size: 1.4rem;
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #000;
  box-shadow: 0px 3px 0px rgba(0,0,0,0.1);
  color: #606060;
  margin: auto;
  text-align: center;
}
.animation a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.animation a,
.animation a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .8s;
  transition: all .8s;
}
.animation a::after {
  top: 0;
  left: -180%;
  width: 150%;
  height: 100%;
  transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
}
.animation a:hover {
  color: #fff;
}
.animation a:hover::after {
  top: 0;
  left: -10px;
  background-color: #000;
  width: 200%;
}

疑似要素としてafter要素にバックグランド色を設定し、「transform: skewX」を使って、平行四辺形の形にしています。
斜めにした分の長さは「width: 150%;」を設定。
注意点としては、「.animation a」の要素に「overflow: hidden;」で要素からはみ出た分は隠すようにしています。
大元の長さを設定しなおせば、どんな長さのボタンも作成可能。

DEMO

大元のclassを設定すれば動かすことも可能なのでWordPressなどのCMSで自動生成される、ページングもこんな感じでホバーアニメを作ることも可能です。

DEMO