Question

尽管标题解释了我的大部分问题，但您可能需要一些背景信息。我已经开发了一段时间了。该网站的每个部分具有 3种颜色的 3个按钮。现在，有一种更有效的方法可以执行以下操作：

/* Button 1 */
#button1 {
  display: inline; 
  margin-left: 26px; 
  color: orangered; 
  border: 3px solid orangered; 
  box-sizing: border-box; 
  padding: 7px 30px 7px 30px; 
  border-radius: 30px; 
  -webkit-border-radius: 30px; 
  -moz-border-radius: 30px;
}
#button1:hover {
  background-color: orangered; 
  color: white;
}

/* Button 2 */
#button2 {
  display: inline; 
  margin-left: 26px; 
  color: dodgerblue; 
  border: 3px solid dodgerblue; 
  box-sizing: border-box; 
  padding: 7px 30px 7px 30px; 
  border-radius: 30px; 
  -webkit-border-radius: 30px; 
  -moz-border-radius: 30px;
}
#button2:hover {
  background-color: dodgerblue; 
  color: white;
}

/* Button 3 */
#button3 {
  display: inline; 
  margin-left: 26px; 
  color: #DD3157; 
  border: 3px solid #DD3157; 
  box-sizing: border-box; 
  padding: 7px 30px 7px 30px; 
  border-radius: 30px; 
  -webkit-border-radius: 30px; 
  -moz-border-radius: 30px;
}
#button3:hover {
  background-color: #DD3157; color: white;
}

<a href="#" id="button1">Read more</a>
<a href="#" id="button2">Read more</a>
<a href="#" id="button3">Read more</a>

可能有一个简单的解决方案

Answer 1

对按钮共享的所有属性使用CSS类：

/* Button 1 */

.button {
  display: inline;
  margin-left: 26px; 
  border: 3px solid;
  padding: 7px 30px 7px 30px; 
  border-radius: 30px;
}

.button:hover {
  border-color: transparent;
  color: white;
}

/* Button 1 */
.button1 { 
  color: orangered; 
}
.button1:hover {
  background: orangered; 
}

/* Button 2 */
.button2 {
  color: dodgerblue; 
}
.button2:hover {
  background: dodgerblue;
}

/* Button 3 */
.button3 {
  color: #DD3157; 
}
.button3:hover {
  background: #DD3157;
}

<a href="#" class="button button1">Read more</a>
<a href="#" class="button button2">Read more</a>
<a href="#" class="button button3">Read more</a>

Answer 2

使用CSS变量，您只需要一个通用定义，然后您可以根据需要设置任意数量的按钮：

.button {
  display: inline-block; 
  margin-left: 26px; 
  color: var(--c,black); 
  border: 3px solid var(--c,black); 
  box-sizing: border-box; 
  padding: 7px 30px 7px 30px; 
  border-radius: 30px; 
}
.button:hover {
  background-color: var(--c,black); 
  color: white;
}

<a href="#" class="button" style="--c:red">Read more</a>
<a href="#" class="button" style="--c:blue">Read more</a>
<a href="#" class="button" style="--c:darkblue">Read more</a>
<a href="#" class="button" style="--c:yellow">Read more</a>
<a href="#" class="button" style="--c:green">Read more</a>
<a href="#" class="button" >Read more</a>

Answer 3

.orange {
  color: orangered;
  border-color: orangered;
}

.orange:hover {
  background-color: orangered;
}

.blue {
  color: dodgerblue;
  border-color: dodgerblue;
}

.blue:hover {
  background-color: dodgerblue;
}

.red {
  color: #DD3157;
  border-color: #DD3157;
}

.red:hover {
  background-color: #DD3157;
}

a {
  display: inline;
  margin-left: 26px;
  border: 3px solid;
  box-sizing: border-box;
  padding: 7px 30px 7px 30px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}

a:hover {
  color: white;
}

<a href="#" class="orange">Read more</a>
<a href="#" class="blue">Read more</a>
<a href="#" class="red">Read more</a>

有没有更有效的方法来使按钮具有不同的颜色？

3 个答案: