CSS - 推奨サイズの150％にボタンを設定する

Question

私は、テキストがホバーで太字に変わるウェブページ上にHTMLボタンを持っています。しかし、これが起こると、ボタンが大きくなります。これは起こりたくありません。私は、document.readyのボタンのサイズを150％にするために、単純なJavaScriptを使用しました。しかし、私は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>