在倾斜的班级按钮中没有偏斜的文本

时间:2012-10-07 00:51:55

标签: html css3

我已经为我的网站创建了一个带有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);
}

3 个答案:

答案 0 :(得分:4)

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

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

Sidharth的回答暗示你完全隐藏原始的<input>并依赖JavaScript来点击样式化的包装器时触发点击它,但是这里可以轻松解决这个问题:设置button-wrapper样式:hover并从嵌套的<input> - 元素中移除所有样式,并将其设为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;
}

答案 1 :(得分:1)

我知道几年过去了,但我遇到了同样的问题,发现只是对文本进行反向偏斜解决了我的问题,如下代码所示:

.yellowShape {
     background-color: rgba(244,255,88,0.92);
     padding: 3px;
     -webkit-transform: skew(20deg);
     transform: skew(20deg); 
}

.yellowShape p {
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg); 
}

答案 2 :(得分:0)

为“按钮”创建一个包装器并将文本放在其中。但是,如果单击文本,则需要使用javascript触发按钮上的“单击”,否则将无法“传播”到按钮。