光るボタンをつくる(コピペ)





成果物


成果物


index.html


index.html
<!-- https://nelog.jp/shine-button -->
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>光るボタン</title>

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      /* ボタン */
      .btn-shine {
        color: #fff;
        cursor: pointer;
        text-decoration: none;
        font-size: 19px;
      }

      /* ボタンを光らせる */
      .btn-shine:before {
        /*光るアニメーション用*/
        animation: shine 3s ease-in-out infinite; /*数字を変更することで光る間隔が変更*/
        background-color: #fff;
        content: ' ';
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: -180px;
        transform: rotate(45deg);
        width: 30px;
      }

      @keyframes shine {
        0% {
          transform: scale(0) rotate(45deg);
          opacity: 0;
        }
        80% {
          transform: scale(0) rotate(45deg);
          opacity: 0.5;
        }
        81% {
          transform: scale(4) rotate(45deg);
          opacity: 1;
        }
        100% {
          transform: scale(50) rotate(45deg);
          opacity: 0;
        }
      }

      .color-button01-big {
        display: block;
        overflow: hidden;
        max-width: 500px;
      }

      .color-button01-big a,
      .color-button01-big a:hover,
      .color-button01-big:before {
        background-color: #ff5685 !important;
      }

      /* 押し込んだかんじ */
      .color-button01-big a:hover {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
        opacity: 1;
      }

      .color-button01-big a {
        -webkit-transition: color 0.3s ease, background 0.3s ease,
          transform 0.3s ease, opacity 0.3s ease, border 0.3s ease,
          padding 0.3s ease, left 0.3s ease, bottom 0.3s ease,
          box-shadow 0.3s ease;
        transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease,
          opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease,
          bottom 0.3s ease, box-shadow 0.3s ease;
        border-radius: 4px;
        text-align: center;
        font-size: 19px;
        padding: 20px 30px;
        max-width: 100% !important;
        display: block;
        text-decoration: none !important;
        -webkit-transform: perspective(0);
        transform: perspective(0);
      }

      .fontawe:after {
        display: block;
        content: '\f061';
        width: 20px;
        height: 20px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
      }

      /* FontAwesome用 */
      span {
        font-family: FontAwesome;
      }
    </style>
  </head>
  <body>
    <span class="color-button01-big">
      <a href="#" class="btn-shine">
        <span class="fa-chevron-circle-right"></span>
        光るボタンサンプル
      </a>
    </span>
  </body>
</html>



ホームへ