html - 如何在 css 中制作不同的按钮？

Question

所以现在我有一个按钮，这就是那个按钮现在的样子:

input[type=button] {
    background: blue;
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}

现在假设我还想要三个按钮。它们看起来都一样，除了我的蓝色按钮，一个是红色的，另一个是黄色的，第四个按钮是绿色的。我该如何着手在 CSS 中创建这些新按钮？

Answer 1

input[type=button] {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.yellow{
  background-color: yellow;
}

<input type="button" class="red"/>

<input type="button" class="blue"/>

<input type="button" class="yellow"/>

尝试使用类