html - 倾斜类按钮中的文本不倾斜

Question

我使用 CSS 类为我的网站创建了一个按钮，我希望它具有平行四边形形状，因此我使用了倾斜功能来创建该形状。代码是正确的，按钮具有我想要的形状，但按钮内的文本在换行后也发生了倾斜。有没有办法让文本看起来不像按钮内的斜塔？这是 html 代码:

<input type="submit" alt="submit" value="Login" class="button">

这就是按钮类的 CSS:

.button {
    float: top;
    width: 275px;
    height: 40px;
    margin-top: 6px;
    display: inline-block;
    font-family: Impact;
    text-align: center;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
}

Answer 1

部分附和 Sidharth，我认为你不会绕过包装器元素来应用 CSS 转换，然后为它的子元素(提交输入)重置它:

<div class="button-wrapper">
  <input type="submit" alt="submit" value="Login">
</div>

Sidharth 的回答暗示您完全隐藏了原始 <input>并依靠 JavaScript 在单击样式包装器时触发对其的单击，但这里有一个简单的方法:为 button-wrapper 设置样式在 :hover并从嵌套的 <input> 中删除所有样式-element 并使其 100% 宽 ( jsBin example ):

.button-wrapper {
  background: #fff;
  border: 1px solid #bbb;
  border-color: #ddd #ccc #bbb;
  overflow: hidden;

  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);
}

.button-wrapper:hover {
  background: #efe;
  border-color: #090;
}

.button-wrapper input {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 0;
  margin: 0;
  width: 100%;

  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-wrapper input:hover {
  color: #060;
}