HTML+CSS활용하여 버튼hover시 8가지 버튼효과!

HTML+CSS활용하여 버튼hover시 8가지 버튼효과! <div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/A4L3xWuBgwY?si=axg3Y-LSwg5IGCS2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/A4L3xWuBgwY?si=axg3Y-LSwg5IGCS2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div>  HTML+CSS활용하여 버튼hover시 8가지 버튼효과!<html><head>      <style>                *{margin: 0; padding: 0, box-sizing: border-box; font-family: Montserrat; }                li{list-style: none; }                a{text-decoration: none; color: inherit;}img{vertical-align: top; }                img{vertical-aling: top; }                button{boreer: nolne; cursor: pointer;  width: 140px; height: 40px; transition: .4s ease-in; }               .wrap{width: 600px; height: 100px; }       <style></head><body>       <div class="wrap">              <div>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                    <button class=btn01">Button 01</button>                     <button class=btn01">Button 01</button>               </div>       </div> </body></html>