様々なデザインのボタンを実装。

2023.09.07

はじめに

概要

ウェブ制作で使えるおしゃれなボタンの実装方法をまとめました。サンプルコードも配布していますので、ぜひ活用してください。

目的

おしゃれなボタンの実装
クラスの説明
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

おしゃれなボタンの実装

ボタン1 ボタン2 ボタン3 ボタン4 ボタン5 ボタン6

クラスの説明

shinyアニメーションの実装

keyframes

.shiny {
  position: relative;
  overflow: hidden;

  &:hover {
    &::after {
      content: '';
      position: absolute;
      top: -100px;
      left: -100px;
      width: 50px;
      height: 50px;
      background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);

      /* アニメーション */
      animation-name: shiny;
      animation-delay: -.8s;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
    }
  }

}

@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;

  }

  30% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

ポイント

・クラスにshinyを付与するだけで、ホバー時にアニメーションが実装されます。
・anmation-delay: -.8s;としています。これにより、ホバー時の初動を制御することができます。