页面中央两个按钮样式一致，如何通过CSS实现差异化显示？

嘿，我懂你现在的困扰——两个按钮现在长得一模一样，想要让它们有各自的辨识度对吧？其实很简单，咱们可以借助它们现有的ID，或者给按钮加专属类的方式来实现差异化，下面给你两种实用的方案：

方法一：利用现有ID直接定制样式 #

你已经给两个按钮分别设置了#javaBtn和#layoutBtn的ID，直接在这两个ID选择器里修改或新增不同的CSS属性就行，ID选择器的优先级足够覆盖通用样式，效果立竿见影。

比如咱们可以给它们设置不同的背景色、字体大小、内边距或者阴影颜色：

/* 通用按钮基础样式（保留不变） */
button{ 
  outline: none; 
  text-align: center; 
  border-radius:15px 50px 30px; 
} 
.button:hover {
  background-color: #3e8e41
} 
.button:active{ 
  background-color: #3e8e41; 
  box-shadow:0 5px #666; 
  transform:translateY(4px); 
} 

/* Java按钮的专属样式 */
#javaBtn{ 
  color: #fff; 
  box-shadow:0 9px #999; 
  background-color:#2ECC71; /* 保留原清新绿色 */
  border: none; 
  padding: 15px 30px; 
  cursor: pointer; 
  font-size: 12px; 
  /* 再加个独特的圆角形状区分 */
  border-radius: 50px 15px 30px;
} 

/* Layout按钮的专属样式 */
#layoutBtn{ 
  color: #fff; 
  box-shadow:0 9px #666; /* 阴影颜色更深 */
  background-color:#3498DB; /* 改成沉稳蓝色 */
  border: none; 
  padding: 15px 40px; /* 按钮宽度更宽 */
  cursor: pointer; 
  font-size: 14px; /* 字体更大一号 */
}

方法二：通过自定义类实现灵活差异化 #

如果以后可能会新增更多按钮，或者想要样式复用，给按钮添加自定义类是更灵活的选择。咱们给每个按钮加一个专属类，然后在CSS里写这些类的样式：

先修改HTML： #

<button id="javaBtn" class="button btn-green">Java按钮</button>
<button id="layoutBtn" class="button btn-blue">Layout按钮</button>

再调整CSS： #

/* 通用按钮基础样式（保留不变） */
button{ 
  outline: none; 
  text-align: center; 
  border-radius:15px 50px 30px; 
} 
.button:hover {
  background-color: #3e8e41
} 
.button:active{ 
  background-color: #3e8e41; 
  box-shadow:0 5px #666; 
  transform:translateY(4px); 
}

/* 绿色按钮专属类 */
.btn-green {
  background-color:#2ECC71;
  box-shadow:0 9px #999;
  font-size: 12px;
  padding: 15px 30px;
}

/* 蓝色按钮专属类 */
.btn-blue {
  background-color:#3498DB;
  box-shadow:0 9px #666;
  font-size: 14px;
  padding: 15px 40px;
}

/* 甚至连hover状态都可以差异化 */
.btn-green:hover {
  background-color: #27AE60; /* 更深的墨绿 */
}

.btn-blue:hover {
  background-color: #2980B9; /* 更深的藏蓝 */
}

这样不管以后加多少按钮，只要给它们加对应的类，就能快速套用样式，维护起来也更方便~

内容的提问来源于stack exchange，提问作者Nazanin