【初心者でもわかる】ふきだしでアピールしてくるボタンの作りかた

4944 ワード
ボタン 初心者 HTML CSS ふきだし HTML テキストリンク

どうも7noteです。ただのボタンじゃなくアピール強めのボタンを作ります。

ボタンの作り方はいろいろありますが、ここで紹介するボタンはこのような動きのあるボタンです。

見本

ふきだしがふわふわしてアピールするボタンの作り方

index.html
<div class="btn">
  <a href="#"><img src="button.png" alt="ボタン"></a>
  <div class="fukidashi"><img src="fukidashi.png"></div>
</div>
style.css
.btn {
  width: 500px;          /* ボタンの幅 */
  position: relative;    /* 基準値とする */
}
.fukidashi {
  width: 400px;          /* 吹き出しの幅 */
  position: absolute;    /* 相対位置に指定 */
  left: 50%;             /* 表示位置を左から50%の位置に指定 */
  top: 0;                /* 表示位置を上から0の位置に指定 */
  transform: translate(-50%, -90%); /* 指定した位置から要素の半分分左に、要素の9割分上にずらす */
  animation: fuwafuwa 2s infinite;  /* アニメーションfuwafuwaを2秒間隔で実行 */
}

@keyframes fuwafuwa {
  0% {
    top: 0px;
  }
  10% {
    top: 3px;
  }
  20% {
    top: 0px;
  }
  30% {
    top: 3px;
  }
  40% {
    top: 0px;
  }
}

解説

CSSの紹介をする上で、ボタンもふきだしも画像で作成していますがCSSで作ったボタンやふきだしでも同じことができます。

position指定でふきだしの要素を浮かせて、好きな位置にもってきます。
その後、アニメーションの設定ですが、2秒の内0.2秒・0.4秒のタイミングで少し下に下がるように指定することでふわふわした動きを再現しています。

まとめ

ボタンの作り方は本当に様々あるので、調べてみて好きなものを導入したらいいかなと思います。
ボタン1つでクリック率が大幅に変わるとも言われていますので、丁寧な作りこみをしていきたいポイントですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

参考：https://haugenic.com/