текст, приспосабливающийся к размеру кнопки

Question

У меня была проблема, когда текст на кнопке переходил по краю кнопки. Текст на кнопке был: «Спасибо». Я решил, что добавив ниже код. Это решило проблему.

HTML

<div class="sign-up"> 
     <p class="sub-header">@Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p> 
     <form id="signupForm"> 
      <div class="form-group"> 
       <label class="sr-only" for="name">@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label> 
       <input type="text" class="form-control" placeholder="@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required /> 
      </div> 
      <div class="form-group"> 
       <label class="sr-only" for="email">@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label> 
       <input type="email" class="form-control" id="email" name="email" placeholder="@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/> 
      </div> 
      <input type="text" id="Channel" name="Channel" style="display: none;" /> 
      <input type="text" id="Campaign" name="Campaign" style="display: none;" /> 
      <button type="submit" class="btn btn-default active">@Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button> 
     </form> 
    </div> 

CSS

.btn.btn-default.active,.btn.btn-default:active,.btn.btn-default:hover { 
    background-color: #71a0af; 
    color: #fff; 
    box-shadow: none 
    <!-- i added the below code to this class: --> 
    text-align: left; 
    padding-left: 12px; 
    width: 90px; 
} 

Проблема в том, теперь, когда я обнаружил, что другая кнопка используется один и тот же класс, но текст здесь: "Да, пожалуйста" , Это означает, что кнопка теперь мала, и текст снова летает над стороной.

Какое наилучшее решение по этой проблеме? Должен ли я сделать другой класс для другой кнопки, или я могу сделать ее отзывчивой, чтобы кнопка адаптировалась к тексту?

С наилучшими пожеланиями

Answer 1

Это отрывок из моего download класса (потому что я в основном использую его для download source code или download кнопки выше статьи):

.download 
{ 
    display: inline-block; 

    /* gradient */ 
    background-color: #627A85; /* old browsers */ 
    background-image: -moz-linear-gradient(top, #8A9FA9 0%, #4B5E66 100%); /* firefox */ 
    /* some other gradients removed here, for brevity */ 

    border: none; 
    border-radius: 6px; 

    /* some other settings here removed for brevity */ 

    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4), -2px -2px rgba(0, 0, 0, 0.2) inset; 
    line-height: 24px; 
    margin: 10px 0 0; 
    font-size: 16px; 
    padding: 5px 12px 7px 15px; 
} 

Как вы можете видеть: нет фиксированной ширины. Основная часть - заполнение и использование встроенного блока.