Стили не применяются к кнопке

Question

Мои проблемы - маленькая и средняя версия кнопки.Я хочу, чтобы они имели меньшие размеры, чем основная кнопка только с классом btn.

Пожалуйста, не стесняйтесь редактировать код и дать мне ответ, почему классы btn--med и btn--small не влияют на появление кнопки.

Вот код:

.btn {
  &:link,
  &:visited {
    text-transform: uppercase;
    text-decoration: none;
    background-color: #000;
    color: #777;
    padding: 27px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    min-width: 30rem;
    min-height: 8rem;
    text-align: center;
    margin-right: 5rem;
  }
  &--small {
    max-width: 10rem;
    background-color: blue;
  }
  &--med {
    max-height: 5rem;
  }
}

<div class="div-1">
  <a href="#" class="btn">Programista</a>
</div>
<div class="div-2">
  <a href="#" class="btn btn--med">SCSS</a>
</div>
<div class="div-3">
  <a href="#" class="btn btn--small">SCSS</a>
</div>

https://codepen.io/maja5252/pen/gdrLvz?editors=1100#0

Answer 1

Как и в других ответах, вам нужно изменить те же свойства, а также те же псевдоклассы.Так как вы нажмете только кнопку :link и :visited, ваши --sm и --med также должны быть обернуты для :link и :visited

https://codepen.io/drGrove/pen/XPdpJN

Answer 2

Из-за свойств min-width и min-height, используемых в btn.Измените их:

.btn {
&:link,
&:visited {
    text-transform: uppercase;
    text-decoration: none;
    background-color: #000;
    color: #777;
    padding: 27px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    text-align: center;
    margin-right: 5rem;
}

&--small {
    max-width: 10rem;
  background-color: blue;
}

&--med {
  max-height: 5rem;
}
}

min-height и min-width переопределяют ширину и высоту, если значение decalred меньше значения, объявленного в min-width и min-height.

Demo: https://codepen.io/anon/pen/MqybNa?editors=1100

Answer 3

You should modify same properties for both btn--small and btn--med button class.

in your code for "btn--small" you are modifying its "max-width" property.
while for "btn--med" you are modifying "max-height" property. 
Modify same properties for both classes. 
for example 
&--small {
   max-width: 10rem;
  background-color: blue;
 max-height: 5rem;
}

&--med {
  max-height: 5rem;
  max-width: 5rem;
}

Answer 4

Вот мое решение

.btn {
  text-transform: uppercase;
  text-decoration: none;
  background-color: #000;
  color: #777;
  padding: 27px 40px;
  display: inline-block;
  border-radius: 100px;
  transition: all 0.2s;
  min-width: 30rem;
  min-height: 8rem;
  text-align: center;
  margin-right: 5rem;
  &:link,
  &:visited {
  }

  &.btn--small {
    min-width: 10rem;/*Change this value according to your needs*/
    min-height: 3rem;/*Change this value according to your needs*/
    background-color: blue;
  }

  &.btn--med {
    min-height: 5rem;/*Change this value according to your needs*/
     min-width: 15rem;/*Change this value according to your needs*/
  }
}

Заменить min-width вместо max-width для маленьких и средних кнопок

Code Pen Link