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

Sun, 30 Oct 2022 21:29:22 +0900

サンプル

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

.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); }

ボタン

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);
}

その他参考サイト

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

https://photopizza.design/shiny_btn_animation/ https://photopizza.design/shiny_btn_animation/

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

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

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

光るボタン on qwerty.work

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

サンプル

HTML

CSS

その他参考サイト