【CSS】マウスホバー時に『キラーん』と光るような効果のボタン作成メモ

サンプル

マウスが重なると光るようなアニメーションが表示されます。

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bdfa3e;
    width: 28.4rem;
    height: 11rem;
    border-radius: 5.5rem;
    font-size: 3.8rem;
    font-weight: 900;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.16);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.btn::before {
    content: '';
    display: block;
    width: 5rem;
    height: 300%;
    top: 50%;
    position: absolute;
    background-color: #fff;
    transform: translate(-500%,-50%) rotate(-45deg);
    transition: transform .5s ease;
}
.btn:hover::before {
  transform: translate(500%, -50%) rotate(-45deg);
}

その他参考サイト

Link

きらっと光る | 動くwebデザインアイディア帳

https://coco-factory.jp/ugokuweb/move01/7-1-40/

Link

【lpで効果抜群】キラリと光るボタンアニメーション10選【css】 | フォトピザ

https://photopizza.design/shiny_btn_animation/

Link

【クリック率が上がる！】affinger風の光るボタンをcssだけで作る方法 | でざなり

https://dezanari.com/css-shiny-button/

Link

キラッと光るボタンのCss

https://give-shot.jp/tokyocss/button-shine/

Link

Css：キラっと光るエフェクトで「シンプルだけど目立つボタン」の作り方：switchbox

https://switch-box.net/shine-button.html