我正在尝试创建一个标准按钮。我在完成这个时遇到了一些问题。下面是我的 scss
如何在单击按钮后禁用文本下划线以及为什么在使用 text-transform: uppercase;
时文本不会转换为大写?
$btCol: #ff6600;
.Btn {
background-color: #fff;
border: 1px solid $btCol;
display: inline-block;
cursor: pointer;
color: #000;
font-size: 12px;
padding:5px 5px;
text-decoration: none;
text-transform: uppercase; //why won't convert the text to uppercase?
}
.Btn:hover {
background-color: lighten($btCol, 50%);
text-decoration: none;
}
.Btn:active {
position: relative;
top: 1px;
}
.Btn:disabled {
background-color: #eb675e;
color: #999;
}
编辑:
html:
<a href="#" class="Btn">light red</a>
最佳答案
您可以尝试创建一个实际的按钮,而不是尝试将每种样式应用到 anchor 标记。这也将使它更具语义。我在这里创建了一个 fiddle :
https://jsfiddle.net/5m6b0dzq/3/
标记:
<button class="Btn"><a href="#">Light Red</a></button>
CSS:
.Btn {
background-color: #fff;
border: 1px solid #ff6600;
display: inline-block;
font-size: 12px;
padding:5px 5px;
text-transform: uppercase; //why won't convert the text to uppercase?
}
.Btn a {
text-decoration: none;
color: black;
}
.Btn:hover {
background-color: green;
}
.Btn:active {
position: relative;
top: 1px;
}
关于html - 创建按钮时背景颜色、下划线和大写文本的阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29981032/