调整垫凸起按钮的大小

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

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

    .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 样式表中覆盖它们。