title: Limit Width Of The Buttons In CSS
body: <p>CSS:</p>
  
  <pre><code>.btn { 
  background: #53A2FF;
  border: 2px solid transparent;
  color: #eee;
  font-weight: bold;
  padding: 9px 15px;
  outline: none;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  }
  .btn:hover { 
  border: 2px solid #000;
  background: transparent;
  color: #000;
  }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="btn"&gt;Hello Over There!&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button class="btn"&gt;This Button Has Too Much Text, That's Why It Is Bigger!&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button class="btn"&gt;Hello Over There! This Is The Third Button!&lt;/button&gt;
  </code></pre>
  
  <p>Output will be similar to:</p>
  
  <p><a href="https://i.stack.imgur.com/dEDxc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEDxc.jpg" alt="Buttons With Different Sizes"></a></p>
  
  <p>Size of each button depends on the amount of letters.</p>
  
  <p>If I change the HTML &amp; do something like this.</p>
  
  <pre><code>&lt;input class="btn" value="Hello Over There!"&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input class="btn" value="This Button Has Too Much Text, That's Why It Is Bigger!"&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input class="btn" value="Hello Over There! This Is The Third Button!"&gt;
  </code></pre>
  
  <p>So the output will be similar to:</p>
  
  <p><a href="https://i.stack.imgur.com/7ESEz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ESEz.jpg" alt="Buttons With Same Sizes"></a></p>
  
  <p>Size of each button will be the same. But <code>input</code> tag is mainly used for HTML forms and using them for making links is not a good idea at all!</p>
  
  <p>I tried to do this using CSS <code>max-width:</code>, but the text inside the button started overflowing.</p>
  
  <p>If I want to use the <code>button</code> tag instead of the <code>input</code> tag, and if I want to limit the width of buttons, so which CSS code should I use?</p>
  
  <p>I exactly want the same output of <code>input</code> tag while using the <code>button</code> tag.</p>