css展开和收缩按钮样式

CSS中，我们经常需要在网页上添加一些“展开”和“收缩”按钮，以便用户可以更方便地获取所需的信息。这些按钮不仅仅是简单的点击后隐藏或显示内容，好的按钮样式可以提高用户体验，增加网站的美观度。下面是几个示例展开和收缩按钮样式，可以供大家参考使用。

/*示例1*/
.expand-btn {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
}

.expand-btn:hover {
  background-color: #eee;
}

.expand-btn:focus {
  border-color: #4CAF50;
}

.expand-btn:active {
  background-color: #4CAF50;
  color: #fff;
}

/*示例2*/
.collapse-btn {
  border: none;
  background-color: transparent;
  color: #4CAF50;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.collapse-btn:hover {
  text-decoration: underline;
}

.collapse-btn:focus {
  transform: scale(1.5);
}

/*示例3*/
.toggle-btn {
  background-color: #4CAF50;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
}

.toggle-btn:hover {
  background-color: #555;
}

.toggle-btn:focus {
  transform: translateY(-2px);
}

.toggle-btn:active {
  background-color: #fff;
  color: #4CAF50;
}

以上展开和收缩按钮样式可以根据实际需要进行调整，例如改变字体颜色、字体大小、边框圆角等等。在应用这些样式时，我们需要先确定按钮的HTML结构，然后按照需求添加CSS样式，最后使用JavaScript或jQuery来实现按钮的展开和收缩功能。希望这些样式对你有帮助！