代码之家 › 专栏 › 技术社区 › BUKTOP

输入按钮-调整文本大小,但保持按钮大小

css3 html5 css html

2

BUKTOP · 技术社区 · 6 年前

我想制作一个自定义按钮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,我不知道里面会有什么文本。

2 回复 | 直到 6 年前

1

2

Jack Wong 6 年前

您可以减小按钮的比例,使其保持原来的宽度,但也可以在视觉上减小大小,而不是在激活时更改字体大小。

transform: scale(0.95);

2

0

Poul Bak 6 年前

'padding-left' padding-right “在按钮上,当 'active'

在这里,我将其设置为10%(这显然太大了):

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

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.