パーツ番号 04-01-01 ・ CSSのみ

シャインボタン

ホバーで光の帯が斜めに走り抜けるボタン。WordPressのCTAや記事内リンクに使うと上品にクリックを促せます。

hoverclickcss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-01-btn" onclick="return false;">詳しく見る</a>

CSS

.d04-01-01-btn{
          position:relative;
          display:inline-block;
          padding:14px 44px;
          background:#1e3a5f;
          color:#fff;
          font-size:15px;
          font-weight:600;
          letter-spacing:.08em;
          text-decoration:none;
          border-radius:6px;
          overflow:hidden;
        }
        .d04-01-01-btn::before{
          content:"";
          position:absolute;
          top:0;
          left:-80%;
          width:50%;
          height:100%;
          background:linear-gradient(120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,0) 100%);
          transform:skewX(-25deg);
          transition:none;
        }
        .d04-01-01-btn:hover::before{
          animation:d04-01-01-shine .8s ease forwards;
        }
        @keyframes d04-01-01-shine{
          from{ left:-80%; }
          to{ left:130%; }
        }

クラス名 .d04-01-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。