将按钮放大，但保持文本大小相同

Question

html中的按钮完美无缺。但我无法使用CSS正确设置样式。

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

当我向按钮添加宽度或填充/边距时，它会破坏按钮样式。它也应该是响应。也出于某种原因，我不能改变颜色/边界半径。 尝试使用锚标记来做一个漂亮的按钮，但这比按钮还要少。

我也单独运行bootstrap作为CSS。

段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先为按钮设置display: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>

Answer 2

我建议您使用bootstrap并将按钮设置为

;

类btn-block将使其全宽，而不会丢失填充。

查看http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h

Answer 3

如果您想要紫罗兰色按钮，请在按钮上添加background-color属性，而不是周围的div。我缩小了您的示例以澄清并添加了圆形边框，如示例图片中所示：

.twitch {
    padding: 10px;
    background-color: #6441a4;
    color: white;
    border-radius: 5px;
    border-width: 0px;
}
<button class="twitch">Sign in with Twitch</button>