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

这是我的解决方法

.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

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-width和min-height中声明的值，则

min-height和min-width会覆盖宽度和高度。

演示：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

类似于其他答案，您需要修改相同的属性以及相同的伪类。由于您是主按钮，只需触摸:link和:visited，您的--sm和--med也需要用:link和:visited换行

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

样式不适用于按钮

4 个答案: