Question

我正在尝试减小垫高按钮的尺寸。我以为我可以通过减小文本的大小来减小按钮的大小。但是我无法这样做。

这是CSS：

button {
    margin-right: 1vw;
    background: #4285F4;
    color: white;
    font-size: 9px;
    height: auto;
    width: auto;
}

和模板：

<button mat-raised-button class="button"><span>Click here to submit</span></button>

Answer 1

您在正确的轨道上。除了字体大小，您还需要更改行高：

button{
    margin-right: 1vw;
    background: #4285F4;
    color: white;
    font-size: 9px;
    line-height: 18px;
    height: auto;
    width: auto;
}

https://stackblitz.com/edit/angular-fmgfn1

Answer 2

将width: auto;更改为指定的单位，例如px，em或rem。

例如，将宽度更改为200px

button {
    margin-right: 1vw;
    background: #4285F4;
    color: white;
    font-size: 9px;
    height: auto;
    width: 200px; 
}

Answer 3

尝试使用类而非元素进行控制，并更改大小，例如本例

.button {
margin-right: 1vw;
background: #4285F4;
color: white;
font-size: 9px;
height: 70px;
width: auto;}

Answer 4

我已经测试过，除非您使用！important css声明（需要覆盖该材料的css声明），否则它在Chrome中不起作用。按钮将很好地缩放。这些值取决于您的个人需求，您必须对其进行调整。

    .varButton {
      margin-right: 1vw !important;
      font-size: 2.7vw !important;
      line-height: 3vw !important;
    }

    <button mat-raised-button type="submit" class="varButton">

Answer 5

Mat-raised-button 将 width 和 min-width 都设置为 64px，您需要在按钮 CSS 样式表中覆盖它们。

调整垫子凸起按钮的大小

5 个答案: