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

我正在尝试创建一个标准按钮。我在完成这项工作时遇到了一些问题。下面是我的SCS

单击按钮后如何禁用文本下划线，以及当

文本转换：大写时，为什么文本不会转换为大写是否已使用

$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:

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


标记：

<button class="Btn"><a href="#">Light Red</a></button>

你应该把这个问题分成多个问题。如果你这样做，你将更有可能找到答案。此外，请张贴任何适用的HTML。您在这里有两个完全无关的问题，一次问一个。另外，这不是Sass问题，只发布编译后的CSS。@jsve:Thank.：）我想所有的答案都是一行？所以我一起问他们。我已经添加了HTML。@cimmanon:谢谢好的，我已经删除了Sascannot:
<button class="Btn"><a href="#">Light Red</a></button>

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