코드는 Codepen에서 작동하지만 브라우저에서는 작동하지 않습니다.

Question

저는 코딩에 완전히 익숙하지 않으므로 친절하게 대해주십시오. 나는 버튼에 CSS 코드를 추가하려고하는데, 그것을 Codepen에서 테스트 해 보았습니다.하지만 브라우저에서 시도해 보았을 때, 하이퍼 링크가 나타나고, 그 다음 코드가 나타납니다.

<a href="index.html" class="button">Home</a> 

     .button 
     {padding: 10px 24px; 
     font-family: trebuchet; 
     Color: #E8DCEC; 
     Background-color: #ed1c24; 
     text-align: center; 
     display: inline-block; 
     font-size: 16px; 
     border: 2px solid #8b52a1; 
     border-radius: 4px;} 

     .button:hover { 
     background-color: #72bf44 
     color: #E8DCEC; } 

내가 여기 완전히 분명 뭔가를 놓친 적이 확신 해요,하지만 난 너무 많은 위에 봤는데 내가 <style>에

Answer 1

CSS 코드를 할 필요가 아무 것도 볼 수없는 나에 연결 link 태그

<a href="index.html" class="button">Home</a> 
 
<style> 
 
.button { 
 
    padding: 10px 24px; 
 
    font-family: trebuchet; 
 
    Color: #E8DCEC; 
 
    Background-color: #ed1c24; 
 
    text-align: center; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border: 2px solid #8b52a1; 
 
    border-radius: 4px; 
 
} 
 

 
.button:hover { 
 
    background-color: #72bf44 color: #E8DCEC; 
 
} 
 
</style>