CSSでホバーすると下からさっと別の背景が広がるエフェクト

CSS3になってからアニメーションの幅が広がりましたよね。今回はちょっと変わったホバーエフェクトです。すごく簡単な仕組みで実装できるので良かったら試してみてください。

デモ

マウスホバーすると下からカーテンのようにアニメーションします！

ボタン下層部を作る

Hover!

.btn {
  position: relative;
  display: inline-block;
  padding: 0 36px;
  color: #fff;
  line-height: 1.9;
  font-size: 28px;
  border-bottom: 5px solid #b0b8ba;
  background: #b0b8ba;
}

ボタン上層部をつくる

Hover!

.btn {
  position: relative;
  display: inline-block;
  padding: 0 36px;
  color: #fff;
  line-height: 1.9;
  font-size: 28px;
  border-bottom: 5px solid #b0b8ba;
  background: #b0b8ba;
}
.btn:before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  width: 100%;
  height: 100%;
  background: #a7c7cb;
  overflow: hidden;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

擬似要素 :before を使って上にかぶせます。

アニメーションをつける

Hover!

.btn {
  position: relative;
  display: inline-block;
  padding: 0 36px;
  color: #fff;
  line-height: 1.9;
  font-size: 28px;
  border-bottom: 5px solid #b0b8ba;
  background: #b0b8ba;
}
.btn:before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  width: 100%;
  height: 100%;
  background: #a7c7cb;
  overflow: hidden;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
.btn:hover:before {
  height: 5px;
}

あとはマウスホバー時に擬似要素の高さを 5px にすれば完成です。ちなみに19行目の overflow: hidden; がないと、ホバー時に高さを 5px にしたとき、Hover!というテキストがはみ出してしまいます。