更改html按钮样式而不更改功能

Question

我是HTML和CSS的新手。 我有一个默认按钮，可以在HTML中很好地工作，但是我想更改其外观，而根本不更改其功能。

这是我的HTML代码：

<a><input type="submit" class="save btn boton-no" value= "HECHO"><a/>

这是我希望按钮具有的样式，是我的CSS文件：

#boton-no{
    color: #AF1C24;
    font-family: "Roboto";
    font-size: 30pt;
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    width: 25%;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 35%;
    margin-right: 35%;
}

如何将这种样式应用于按钮？ 我已经尝试了几种方法，例如更改“ id”，“ style”，...，但是按钮不会更改其外观，或者会更改其样式和功能...

请问你能帮帮我吗？？ 非常感谢你！！

Answer 1

选择器#boton-no适用于id=boton-no的元素。 您应该使用类扇区，其外观如下： .boton-no 。 样式适用于所有具有button-no类的元素。 因此，您的CSS应该看起来像这样：

.boton-no {
    color: #AF1C24;
    font-family: "Roboto";
    font-size: 30pt;
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    width: 25%;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 35%;
    margin-right: 35%;
}

您可以在此处阅读有关CSS选择器的更多信息。

Answer 2

您可以使用简化的CSS来做到这一点。 井号标记也以id为目标，而不是类。

 #boton-no{ color: #AF1C24; font-family: "Roboto"; font-size: 40pt; border: 1px solid; border-radius: 10px; padding: 20px 40px; display: block; margin: 0 auto; } 

 <input type="submit" class="save btn" id="boton-no" value= "HECHO" />