倾斜的类按钮中的文本不倾斜 [英] Not skewed text in skewed class button
问题描述
我为带有CSS类的网站创建了一个按钮,我希望它具有平行四边形形状,因此我使用了偏斜函数来创建形状.代码是正确的,并且按钮具有我想要的形状,但是按钮内部的文字也随着它的换行而歪斜了.有一种方法可以使文本看起来不像我的按钮内的斜塔?这是html代码:
I've created a button for my website with a CSS class and I wanted it to have a parallelogram shape so I've used the skew function to create the shape. The code was right and the button has the shape that I wanted but the text inside the button resulted skewed as well following its wrap. There's a way to make the text not looking like the Leaning Tower inside my button? Here's the html code:
<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);
}
推荐答案
部分借用Sidharth,我认为您不会绕过wrapper元素来应用CSS转换,然后将其重置为其子元素(提交-输入):
Partly seconding Sidharth, I think you won't get around the wrapper element to apply the CSS-transform on and then reset it for its child elements (the submit-input):
<div class="button-wrapper">
<input type="submit" alt="submit" value="Login">
</div>
Sidharth的答案意味着,您完全隐藏了原始的< input>
,并在单击样式化包装器时依靠JavaScript来触发对它的单击,但这是简单的方法::hover
上的 button-wrapper
并从嵌套的< input>
-element中删除所有样式,并将其样式为100%宽( jsBin示例):
Sidharth's answer implies that you completely hide the original <input>
and relies on JavaScript to trigger a click on it when the styled wrapper is clicked, but here's and easy way around that: Style the button-wrapper
on :hover
and remove all styles from the nested <input>
-element and make it 100% wide (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;
}
这篇关于倾斜的类按钮中的文本不倾斜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!