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

如何将此样式应用于我的按钮？我尝试了几件事，比如改变＆＃34; id＆＃34;，＆＃34;样式＆＃34;，......但按钮不会改变它的外观或改变它的风格和功能...

你可以帮助我吗？非常感谢!!

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选择器here的更多信息。

Answer 2

您可以使用简化的CSS执行此操作。标签符号也是目标，而不是类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: