我已经为我的网站创建了一个带有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);
}
答案 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触发按钮上的“单击”,否则将无法“传播”到按钮。