<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>버튼 채우기 효과 만들기  </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>index_html</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="KO_Yoon"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     <meta charset="UTF-8"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" centent="IE=edge"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewoport" centent="width=deviice-width, initiial-scale="1.0"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Slide Button</title></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="./style.css"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   <style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body {</b></span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        height: 100vh;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        display: flex;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        justify: flex;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        align-items: center;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-color: #3c3e70;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       font-size: 25px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       padding: 15px 30px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       border: 3px solid gold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       backround-color: transparent;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       color: gold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       text-transform: uppercase;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       letter-spacing: 5px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       font-weight: bold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       position: relative;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       transition: all 0.4s;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       overfow; hidden;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn:focus {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       outline: none;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn::before {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        centent: "";</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        position: absolute;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        height: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        width: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-color: gold;  </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        top: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        left 0;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   </style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><button class="btn">Button</button></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>style.CSS </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        height: 100vh;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        display: flex;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        justify: flex;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        align-items: center;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-color: #3c3e70;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       font-size: 25px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       padding: 15px 30px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       border: 3px solid gold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       backround-color: transparent;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       color: gold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       text-transform: uppercase;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       letter-spacing: 5px;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       font-weight: bold;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       position: relative;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       transition: all 0.4s;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       overfow; hidden;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn:focus {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       outline: none;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn::before {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        centent: "";</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        position: absolute;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        height: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        width: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-color: gold;  </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        top: 100%;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        left 0;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p> </p><p> </p><p> </p><p> </p><p>https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default</p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> <b>버튼 채우기 효과 만들기</b></b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://www.google.com/search?q=%EB%B2%84%ED%8A%BC+%EC%B1%84%EC%9A%B0%EA%B8%B0+%ED%9A%A8%EA%B3%BC+%EB%A7%8C%EB%93%A4%EA%B8%B0&client=avast-a-1&source=lnms&tbm=vid&sa=X&ved=2ahUKEwjp-NPZ47T8AhXyslYBHaQLDdkQ_AUoAnoECAEQBA&biw=1920&bih=969&dpr=1