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

Мои проблемы - это маленькая и средняя версия кнопки. Я хочу, чтобы они имели меньшие размеры, чем основная кнопка, только с классом 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

css sass

27.08.2018 08:28

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 для маленьких и средних кнопок

Ссылка на кодовое перо

Это здорово! Но я не понимаю, как это работает. Когда у нас есть «& .btn - small», вложенный в «.btn», он должен переводиться в «.btn.btn - small». Это вообще правильно?

— 27.08.2018 09:02

27.08.2018 08:32

Ответ принят как подходящий

Из-за свойств 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 переопределяют ширину и высоту, если декалированное значение меньше значения, объявленного в min-width и min-height.

Демо: https://codepen.io/anon/pen/MqybNa?editors=1100

27.08.2018 08:33

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;
}

27.08.2018 08:43

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

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

Спасибо. Я забыл об этом! Но я думаю, что код сейчас выглядит немного беспорядочно по сравнению с другими ответами :)

— 27.08.2018 09:10

27.08.2018 08:48