CSS - 버튼을 권장 크기의 150 %로 설정하십시오.

Question

마우스를 가져 가면 텍스트가 굵게 표시되는 웹 페이지에 HTML 버튼이 있습니다. 그러나 이런 일이 발생하면 버튼이 커지므로이를 원하지 않습니다. 따라서 간단한 JavaScript를 사용하여 document.ready에서 버튼의 크기를 150 %로 만들었습니다. 그러나, 나는 JS의 사용을 최소화하기 위해 노력하고 있습니다, 그래서 이것은 CSS에서만 가능합니까?

코드 샘플 : 사전에

<button id="b1">Test</button> 
<style> 
<!-- When you hover over the button, it resizes - I want the width to become 150% what it would be on page load. --> 
#b1{ 
    float: right; 
    margin-left: 15px; 
    background-color: white; 
    height: 100%; 
    transition-duration: 0.2s; 
    font-weight: bold; 
    border: 0; 
    font-size: 20px; 
    outline: 0; 
} 

#b1:hover{ 
    color: #33F; 
    font-size: 22px; 
} 
</style> 

감사합니다,

- 마태 복음

Answer 1

.btn1{ 
 
\t background:#0095ff; 
 
\t border:0; 
 
\t outline:0; 
 
\t font-weight:400; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t padding: 6px 15px; 
 
\t transition: all .4s ease; 
 
\t cursor:pointer; 
 
\t text-transform:uppercase; 
 
    } 
 
    .btn1:hover{ 
 
\t font-weight:600; 
 
     background:#07c; 
 
    } 
 

 

 
    .btn2{ 
 
\t background:#0095ff; 
 
\t border:0; 
 
\t outline:0; 
 
\t font-weight:400; 
 
\t color:#fff; 
 
\t font-size: 16px; 
 
\t padding: 6px 15px; 
 
\t transition: all .4s ease; 
 
\t cursor:pointer; 
 
\t text-transform:uppercase; 
 
\t min-width:150px; 
 
    } 
 
    .btn2:hover{ 
 
\t font-weight:600; 
 
\t background:#07c; 
 
    }

This might be the Problem : 
 
    <button class="btn1">Hello</button> 
 

 
    <br><br><br><br> 
 
    Solution - need to add min-width or width in button 
 
    <button class="btn2">Hello</button>

그냥 버튼을 고정을 줄 수없는 이유