CSSだけでできちゃう！hover時の面白いボタンエフェクト

2017-01-20

どうも、すんです。
2017年になりました。最近の急激な温度変化に体がついてきません。滅多に雪が降らないことで有名な静岡に雪が降ったりしたので(5分で止みましたが)この寒さはただごとではありません。……だからなんだ、という感じなんですが。
では、とっとと本題に入りたいと思います。今回はマウスカーソルを重ねた時に「お！」となるような、CSSだけで実装できちゃうちょっと変わったhover時のボタンエフェクトについて書いていきたいと思います。

マウスオーバーで背景をぶわっと表示

ぶわっと

【html】

   <a class="btn" href="#">ぶわっと</a>

【css】

.btn {
   display: block;
   margin: 20px auto;
   width: 250px;
   height: 60px;
   text-align: center;
   line-height: 60px;
}
.btn:before,
.btn:after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
}
.btn,
.btn:before,
.btn:after {
   box-sizing: border-box;
   transition: all 0.5s;
}
.btn {
   position: relative;
   z-index: 2;
   border: 2px solid #666;
   color: #c12748;
   line-height: 50px;
   overflow: hidden;
}
.btn:hover {
   color: #fff;
}
.btn:after {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* 背景の表示始めのサイズ */
   transform: scale(0.2);
}
.btn:hover:after {
   background: #c12748;
   /* 背景の表示終わりのサイズ */
   transform: scale(1);
}

まず「.btn」のafterにぶわっと表示させる背景のサイズと位置を設定しておきます。「.btn:hover」の背景色は#fffで真っ白に設定しておいて、「.btn:hover:after」(.btnにカーソルを重ねた時の.btn:after要素)の背景色をぶわっと表示させる色に設定しておくことで、マウスカーソルを重ねた時にアニメーションするようになります。

マウスオーバーで線の種類を変更

線が変わるよ

【html】

   <a class="btn" href="#">線が変わるよ</a>

【css】

.btn {
   display: block;
   margin: 20px auto;
   width: 250px;
   height: 60px;
   text-align: center;
   line-height: 60px;
}
.btn:before,
.btn:after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
}
.btn,
.btn:before,
.btn:after {
   box-sizing: border-box;
   transition: all 0.5s;
}
.btn {
   position: relative;
   z-index: 2;
   background-color: #fff;
   border: 2px solid #c12748;
   color: #c12748;
   line-height: 48px;
}
.btn:after {
   top: 5px;
   left: 5px;
   width: 236px;
   height: 46px;
   /* 中のドット枠 */
   border: 2px dotted #c12748;
   /* 通常時に透過 */
   opacity: 0;
}
.btn:hover:after {
   /* hover時に透過なし */
   opacity: 1;
}
.btn:hover {
   /* hover時に線の変更 */
   border: 2px dotted #c12748;   
}

.btn:afterにあらかじめ、枠内に表示されるドット線についてcssを書いておきます。ただし、通常時には「opacity: 0;」を設定して見えないようにしておきます。「.btn:hover:after」に「opacity: 1;」を設定しておくことで、.btnにカーソルを重ねた時に、.btn:after要素を表示させる、という動作をします。あとは「.btn:hover」に線をドットにするという指定をすることで、大枠部分についてもhover時に線の種類が変更されるようになります。

マウスオーバーでくるっと回転

まわるよまわったよ

【html】

   <a class="btn" href="#"><span>まわるよ</span><span>まわったよ</span></a>

【css】

.btn {
   display: block;
   margin: 20px auto;
   width: 250px;
   height: 60px;
   text-align: center;
   line-height: 60px;
}
.btn:before,
.btn:after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
}
.btn,
.btn:before,
.btn:after {
   box-sizing: border-box;
   transition: all 0.5s;
}
.btn {
   position: relative;
   perspective: 300px;
}
.btn span {
   display: block;
   position: absolute;
   width: 250px;
   height: 60px;
   border: 2px solid #c12748;
   text-align: center;
   line-height: 60px;
   box-sizing: border-box;
   transition: all 0.5s;
   pointer-events: none;
}
.btn span:nth-child(1) {
   /* 最初に表示されてる部分のボタン */
   background-color: #fff;
   color: #c12748;
   transform: rotateX(0deg);
   transform-origin: 50% 50% -30px;
}
.btn span:nth-child(2) {
   /* hover時に表示されるボタン */
   background-color: #c12748;
   color: #fff;
   transform: rotateX(-90deg);
   transform-origin: 50% 50% -30px;
}
.btn:hover span:nth-child(1) {
    background-color: #c12748;
    transform: rotateX(90deg);
}
.btn:hover span:nth-child(2) {
   transform: rotateX(0deg);
}

まず「.btn span:nth-child(1)」は初期状態で表示されている「まわるよ」と書かれている部分になります。「.btn span:nth-child(2)」が、hover時に表示される「まわったよ」部分です。「transform: rotate」を使って、「.btn:hover span:nth-child(1)」と「.btn:hover span:nth-child(2) 」(マウスカーソルを重ねた際のまわるよ、まわったよボタン)を回転させるように設定してあります。

まとめ

CSSで実装できるマウスオーバー時のアニメーションについて書いてみました。前回まではSVGを使用したアニメーションやボタンエフェクトについて紹介していましたが、CSSだけでもこんなことができてしまうんですね。個人的には、同じ表示のされ方をするアニメーションだったらより短いコードで簡潔に表示できたほうがいいと思っています。

CSSでは実現できないような複雑なアニメーションはSVGに頼って、CSSだけで実現できることはCSSにお願いして。適材適所、どこに何を使えば一番効率がいいかということを実装をする時は考えながらやっていけたらなと思っています。