html - 使按钮变大，但保持文本大小不变

Question

html 中的按钮完美运行。但是我无法使用 CSS 为其设置正确的样式。

目标是让按钮看起来像这样:

当我向按钮添加宽度或填充/边距时，它会破坏按钮样式。它也应该是响应式的。同样出于某种原因，我无法更改颜色/边框半径。 也尝试使用 anchor 标记来制作一个漂亮的按钮，但效果甚至不如这个按钮。

我还将 bootstrap 作为 CSS 单独运行。

片段:

#background-log {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.button-login {
    justify-content: center;
    align-items: center;
    margin: 10px;
    background-color: #6441a4;
}

.twitch {
  text-transform: uppercase;
  width: 100px;
}

<div id="background-log">
  <div class="button-login">
    <button class="twitch">Sign in with Twitch</button>
  </div>
</div>

Answer 1

首先为按钮设置 display:block; 使其成为 block 级元素，您可以在其上正确应用宽度和填充/边距。在按钮上使用 width 使其更宽，使用 padding 增加文本和按钮边框之间的空间并覆盖默认按钮值，如 border和 background 包含您想要的值。

要使按钮具有响应性，您还可以使用百分比值作为宽度。您还可以添加 border-radius 和 box-shadow 使其看起来更像您的图像。请参见下面的示例。

#background-log {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.button-login {
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.button-login button {
  display: block;
  text-transform: uppercase;
  width: 300px;
  color: #fff;
  border: none;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.twitch {
  background-color: #6441a4;
}
.hitbox {
  background-color: #98cb01;
}

<div id="background-log">
  <div class="button-login">
    <button class="twitch">Sign in with Twitch</button>
    <button class="hitbox">Sign in with Hitbox</button>
  </div>
</div>