PostMaster

Edit

【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
301 Moved Permanently

301 Moved Permanently

https://coco-factory.jp/ugokuweb/move01/7-1-40/
Link
https://photopizza.design/shiny_btn_animation/

https://photopizza.design/shiny_btn_animation/
Link
403 Forbidden

403 Forbidden

https://dezanari.com/css-shiny-button/
Link
https://give-shot.jp/tokyocss/button-shine/

https://give-shot.jp/tokyocss/button-shine/
Link
https://switch-box.net/shine-button.html

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

前へ

【Vue】お問い合わせフォームのバリデーションとPHPでメール送信サンプル

次へ

LaravelとComposerのバージョンを確認するコマンド