Question

我想制作一个自定义按钮CSS，并尝试使“按下”按钮看起来像被按下：

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
<input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.

我还可以，但是更改字体大小可能会更改按钮本身的大小，从而导致整个布局发生更改。另一方面，我无法设置按钮的宽度，因为我想为我的所有页面和那里的所有按钮制作一个“通用” CSS，而且我不知道里面会有什么文本。问题：有没有办法在更改按钮的字体大小时保持按钮的宽度？还是唯一的方法是使用“ div中的div”代替按钮？

Answer 1

您可以减小按钮的比例，而不是更改活动字体的大小，从而使其仍保持其原始宽度，但也可以在视觉上减小其大小。

transform: scale(0.95);

Answer 2

您可以尝试在rem <- length(input) %% 3 input <- c(input, rep(NA, ifelse(rem == 0, 0, 3 - rem))) idx1 <- seq(1, length(input), 3) idx2 <- seq(2, length(input), 3) idx3 <- seq(3, length(input), 3) df <- data.frame(v1=input[idx1], v2=input[idx2], v3=input[idx3])时在按钮上设置相对的'padding-left'和'padding-right'。

在这里我将其设置为10％（显然太大）：

'active'

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
  padding-left: 10%;
  padding-right: 10%;
 }

输入按钮-调整文字大小，但保持按钮大小

2 个答案: