调整垫凸起按钮的大小

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