主页 / 问题 / 1094259
Accepted
Мирас Текесбаев
Asked:2020-03-13 20:33:31 +0000 UTC2020-03-13 20:33:31 +0000 UTC

如何将转换应用于按钮内的文本？

  • 772

有一个按钮可以进入网站：

.auth-button {
  display: inline-block;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:active {
  background-color: #4a76a8;
}

.auth-button-span:active {
  transform: translate(10px, 10px);
}
<button class="auth-button"><span class="auth-button-span">Войти</span></button>

如何使transform文本垂直 5px Войти？我认为这与position. span有没有可能在没有inside的情况下做到这一点button？

css3

3 个回答

  1. Best Answer

    我认为<span>只需要一个额外的标签来分隔类和更精细、更灵活的样式。毕竟，“蓝色按钮”和“白色字母”听起来比“带有白色文本的蓝色按钮”更简单、更符合逻辑。如果支持例如“夜间”或自定义主题，则这一点尤其重要。包括。<span>如果不需要上述内容，您可以不这样做。

    我不太明白为什么transform: translate()？..我看到的解决方案是这样的（第二个按钮没有<span>，但效果是一样的）：

    .auth-button {
  display: inline-block;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:active {
  background-color: #4a76a8;
  /* Сдвиг вверх */
  padding: 0 0 5px;
  /* Сдвиг вниз
  padding: 5px 0 0; */
}
    <button class="auth-button"><span class="auth-button-span">Войти</span></button>
<br>
<button class="auth-button">Войти</button>

    • 2

  2. 如何为登录文本进行 5px 垂直变换？如果没有按钮内的跨度，是否可以做到这一点？

    单独使用 CSS 是不可能的。至少，我不知道这样的属性，因此可以只增加文本的高度而不增加其大小。但是您可以巧妙地做到这一点，无需使用spaninside button，而是使用伪元素:before。这是一个例子：

    .auth-button {
  vertical-align: top;
  display: inline-block;
  position: relative;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:before {
  content: "Войти";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 2.4;
}

.auth-button:active {
  background-color: #4a76a8;
}

.auth-button:active:before {
  transform: scale(1, 1.4);
}
    <button class="auth-button"></button>

    • 1
    1. Span 可能选择得不是很好，因为它最初是一个内联元素。为了让它发挥作用 - 写信给他display: block;
    2. 伪类:active更多的是关于按钮本身，所以我会试试这个：

        .auth-button {
        display: inline-block;
        height: 35px;
        width: 100px;
        background-color: #5b88bd;
        border: 3px;
        border-radius: 3px;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        margin: 14px 0;
        outline: none;
    }
    
    .auth-button:active {
        background-color: #4a76a8;
    }
    
    .auth-button:active span {
        display: block;
        transform: translate(0, 5px);
     }
        <button class="auth-button"><span class="auth-button-span">Войти</span></button>

    您可以更漂亮地定位班次。如果你不打算移动，而是拉伸，那么你需要scale使用translate.

    • 1

相关问题