Question

我正在尝试创建一个标准按钮。我完成这个问题很少。下面是我的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>

Answer 1

您可以尝试创建一个实际按钮，而不是尝试将每个样式应用于锚标记。这也会使它更具语义性。我在这里创造了一个小提琴：

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;
}

创建按钮时，背景颜色，下划线和大写文本的阴影

1 个答案: