【css】マウスオーバーでボタンを押した感じにする

ウェブ制作技術

この記事はこんな人に向けて書いています

  • Webデザイナー
  • コーダー/マークアップエンジニア

おはようございます、ヒグチです。
Webのコーディングって楽しいですよね。
本日は、そんなコーディングをもっと楽しくする、cssのTIPSを紹介します。

コーディングTIPS

マウスオーバーでボタンを押した風なギミックを作る

CSS3で表現の幅が広がり、画像を使わないボタンデザインが主流になりつつあります。
CSSだとTransitionやanimationで手軽にアニメーションを実装できるのもいいですよね。

プログラミング

ボタンにカーソルが載った時に、アニメーション付きでボタンを沈ませ、気持ちよく押した感じにするCSSのサンプルを紹介します。

ではサンプルを。

See the Pen bEvrzR by daisukehiguchi (@daisukehiguchi) on CodePen.

ボタンにカーソルをONすると、ボタンが沈みます(ついでに色も変えています。)

プログラミング

ポイントは3つ。

  • hover時にbox-shadowをnoneにする
  • transitionでアニメーションをつける
  • hover時、transform: translate3dで位置を動かす

いかがでしたでしょうか。

これを使ってどんどん押した感じを出していってください!

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。