這是代碼 我是初學(xué)者，所以如果有任何我還應(yīng)該改進(jìn)的錯(cuò)誤，請(qǐng)糾正我。

button {
  font-size: 10px;
  font-family: roboto, Arial;
  color: white;
  background-color: rgb(59, 102, 241);
  border-radius: 100px;
  border-width: 0px;
  width: 190px;
  height: 25px;
  caret-color: transparent;
  transition: all 0.3s;
}

button:hover {
  background-color: rgb(87, 125, 250);
  cursor: pointer;
}

button:active {
  font-size: 9px;
  padding: 1px;
}

Please put HTML here!

在你的按鈕CSS中，你設(shè)置了寬度和高度，沒(méi)有填充。但是在活動(dòng)狀態(tài)下，你沒(méi)有改變寬度和高度，只是稍微改變了填充。

你有幾種方法來(lái)完成你所尋找的。

您可以忽略寬度和高度并使用填充，或者在活動(dòng)狀態(tài)下更改寬度和高度。

我有兩個(gè)不同的按鈕顯示你如何使用改變寬度/高度和填充的方法。

button {
  font-size: 10px;
  font-family: roboto, Arial;
  color: white;
  background-color: rgb(59, 102, 241);
  border-radius: 100px;
  border-width: 0px;
  caret-color: transparent;
  transition: all 0.3s;
}

button:hover {
  background-color: rgb(87, 125, 250);
  cursor: pointer;
}

button:active {
  font-size: 9px;
  padding: 5px 40px;
}

.padded{
  padding: 10px 80px;
}

.padded:active {
  font-size: 9px;
  padding: 5px 40px;
}

.dimensions{
    width: 190px;
    height: 35px;
}

.dimensions:active{
    width: 130px;
    height: 25px;
}

<button class="padded">Pad Change</button>
<button class="dimensions">Width/Height Change</button>

你需要讓你的按鈕水平和垂直居中。那么想要的效果就會(huì)發(fā)生。

我很快就用一個(gè)老技巧將元素居中。也許flex是水平和垂直居中的最佳選擇

button {
  font-size: 10px;
  font-family: roboto, Arial;
  color: white;
  background-color: rgb(59, 102, 241);
  border-radius: 100px;
  border-width: 0px;
  caret-color: transparent;
  transition: all 0.3s;
}

.container {
position: relative;
width: 100%;
}

.container button {
  margin: 25px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%)
}

button:hover {
  background-color: rgb(87, 125, 250);
  cursor: pointer;
}

button:active {
  font-size: 8px;
  padding: 5px 20px;
}

.dimensions{
    width: 190px;
    height: 35px;
}

.dimensions:active{
    width: 130px;
    height: 25px;
}

<div class="container">
<button class="dimensions">Change button</button>
</div>

你可以& quot超級(jí)中心& quot使用display:grid的按鈕；然后place-items:center；在包裝元素上。通過(guò)簡(jiǎn)單地改變包裝容器中的字體大小來(lái)進(jìn)行試驗(yàn)——因?yàn)槲沂褂肊M來(lái)度量，所以您可以在一個(gè)地方改變所有的大小。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.button-container {
  /* uncomment this to see your original size smaller button */
  /* font-size: 0.625em; */
  display: grid;
  place-items: center;
  border: solid #00FF00 1px;
  padding: 1em;
}

.my-button {
  font-size: 1em;
  font-family: roboto, Arial, sans-serif;
  color: #FFFFFF;
  background-color: #3b66f1;
  border-radius: 6.25em;
  border-width: 0px;
  width: 12em;
  height: 1.5em;
  caret-color: transparent;
  transition: all 0.3s;
}

.my-button:hover {
  background-color: #577dfa;
  cursor: pointer;
}

.my-button:active {
  font-size: 0.75em;
  padding: 0.25em;
  background-color: #577dfa44;
}

<button type="button" class="my-button-test">Click me then click TAB to focus:My Button and it spacebar to make it "active"</button>
<div class="button-container">
  <button type="button" class="my-button">My Button</button>
</div>