【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);
}
その他参考サイト
