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

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

您可以尝试创建一个实际的按钮，而不是尝试将每种样式应用到 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;
}