html - 如何使按钮具有相同的过渡和某些相同的属性，但又具有一些不同的属性？

因此，我几乎没有做任何设计，都在尝试尝试，但是我想我在html和css中使用class和id时就想到了错误，因为我是从编程中想到的透视。我当时认为类是一种父类，它代表一个孩子的ID，他们可以在继承属性的同时拥有自己的属性。但是，尽管从某些方面来看这似乎可行，但是当我将过渡悬停在过渡上时，过渡并没有达到我的预期。
我有这样的无序按钮列表

<li><button  type = "button" id = "first">Press Me</button></li>

和这个CSS：

button {
    padding: 15px;
    font-size: 24px;
    border-radius: 25px;

    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;

    transition: all 0.2s linear 0.2s;
    }

#first{
    background-color:#ff9bcd;
    border: 5px double #ffffff;
}

#second{
    background-color:#ff9bcd;
    border: 5px double #9bffcd;
}

#third{
    background-color:#ffffff;
}

button:hover{
    background:#9bffcd;
    border: 5px dotted #ff9bcd;
    color:#9bffcd;
}

首先，仅颜色过渡有效，第二，仅边界过渡有效，第三，仅背景和颜色过渡有效。似乎过渡仅适用于我尚未覆盖的属性。无论如何，在保留这些过渡特性的同时保留其各自的属性？我可能会覆盖其他按钮的这些转换，但是我很好奇我将如何对其进行某些维护。谢谢

最佳答案

在编写可重用代码时，始终首选class而不是id，这将帮助您非常轻松地覆盖属性，而不必明确。

因此，这里是您需要的示例。我认为它将为您工作。

的HTML

<button  type="button" class="first">Press Me</button>
<button  type="button" class="second">Press Me</button>
<button  type="button" class="third">Press Me</button>

的CSS

button {
    padding: 15px;
    font-size: 24px;
    border-radius: 25px;

    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;

    transition: all 0.2s linear 0.2s;
}

.first{
    background-color:#ff9bcd;
    border: 5px double #ffffff;
}

.second{
    background-color:#ff9bcd;
    border: 5px double #9bffcd;
}

.third{
    background-color:#ffffff;
}

button:hover{
    background:#9bffcd;
    border: 5px dotted #ff9bcd;
    color:#fff;
}

链接到Fiddle。

祝您代码愉快。

关于html - 如何使按钮具有相同的过渡和某些相同的属性，但又具有一些不同的属性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28623473/