样式不适用于按钮

Majael 发表于 Dev

105

马杰尔

我的问题是按钮的中小型版本。我希望它们的尺寸比仅具有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

由于在上使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。