css中点击按钮加小三角

CSS中点击按钮加小三角是一种常见的设计技巧，可以美化页面，有效提升用户体验。

// HTML代码
<button class="btn">按钮</button>

// CSS代码
.btn {
  position: relative;
}

.btn::after {
  content: "";
  display: inline-block;
  border: 4px solid transparent;
  border-top-color: #fff;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.btn:hover::after {
  border-top-color: #333;
} 

以上代码实现了当鼠标悬停在按钮上时，小三角变成黑色，当鼠标离开按钮时，小三角恢复为白色。

通过使用伪元素::after和定位，实现了小三角的添加，同时为了让小三角在按钮的右侧位置，使用了right属性进行定位，使用transform属性让小三角垂直居中。

使用这种按钮设计技巧可以让页面看起来更加精致，为用户提供更好的点击指示。