CSSだけで実装できる!日向坂46風ホバーエフェクトボタン

HTML / CSS

はじめてのCodePenデビュー

今まで、使い回すコードやスニペットなどは、VSCodeやBoostnoteで管理していたのですが、以下の理由から、CodePenを使ってみようと決意しました。

  1. オンライン上でコードがすぐに反映され、すぐに保存もできる。
  2. ホームボタンを押せばすぐに世界中の人が書いたカッコいいコードがたくさん見られて刺激になる
  3. コードを公開してレビューをもらいたい

CodePenの他にも色々そういうサービスはたくさんあるみたいですが、個人的に馴染みがあって、よく色んな所で見かけていたので、CodePenをチョイスしました。

マウスホバーでアニメーションするボタン※スマホ対応

この度、仕事のコーディングでマウスホバーエフェクトのボタンを実装しました。

仕事で作ったものは単色でしたが、せっかくなのでアレンジしたいと思い、ハマっている日向坂46のイメージカラーを流行りのグラデーションにして作ってみました。

ただ当たり前のことですが、マウスホバーのエフェクトはパソコンでしか見られない仕様なので、少し工夫を加えてスマホなどのレスポンシブでもホバーエフェクトが見られるようにしました。

詳細は↓の解説でご紹介します。気になる方はそちらを要チェキです。

デモ

早速ご紹介します。(Resultでボタンが見られます)

See the Pen ボタンアニメーション-グラデーション by jookalubi (@jookalubi) on CodePen.

コード画面にも書きましたが、スマホの場合はまずボタンをタップしてもらって、そのあと別の所をタップするとエフェクトが見られます。

パソコンだとホバーしている間に色が変わって、ホバーを外すと色が戻る、という動きになります。

解説

エフェクトはCSSのみで実装されています。肝となる部分だけ軽く触れます。

ポイントとなるのは、beforeの疑似要素とtransformです。

skewというtransformは私も今回、初めて使いました。
skew Xで角度を指定すると、平行四辺形みたいな形になります。

それをbeforeで作って、親要素のdivで平行四辺形の余計な部分を切り取っているイメージです。

.btn:hover {
color: #fff;
}
.btn::before{
position: absolute;
top: 0;
left: -30%;
z-index: -1;
content: '';
width: 130%;
height: 100%;
background:linear-gradient(to right, #5bbee5 0%, #52ddae 100%);
transform-origin: right top;
transform: skewX(30deg) scale(0, 1);
transition: transform .3s ease-in;
}
.btn:hover::before {
transform-origin: left top;
transform: skewX(30deg) scale(1, 1)
}

もし気に入った方はご自由にお使いくださいませ~

コメント

タイトルとURLをコピーしました