#HTML #CSS [きらりと光るボタン]の作り方 #忍者コード

[きらりと光るボタン]の作り方
自分の環境に書くコード
[HTML]
<div class="btn">ここをクリック</div>
[CSS]
.btn{ position: relative;
padding: 10px 0;
background-color: #dddddd;
text-align: center;
color: black;
width: 200px;
cursor: pointer;
box-shadow: 0 5px #bbbbbb;
transition: .5s;
}
.btn:active{
transform: translateY(5px);
box-shadow: 0 0 #bbbbbb;
}
.btn::before{
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
}
これにCSSを追加してください。
解答は下の忍者コードのサイトをご覧ください。

[忍者コードのサイト]のcssAnimationの初級の4

f:id:tyoukaisan_fuji:20210530174621p:plain