css点按钮出现文字

CSS点按钮出现文字是一种常见的Web开发技巧，它可以增强交互性，提高用户体验。下面我们来看一下如何实现这一效果。

/* HTML部分 */
  <button class="btn"></button>
  /* CSS部分 */
  .btn {
  
  position: relative;
  
  width: 50px;
  
  height: 50px;
  
  border-radius: 50%;
  
  border: none;
  
  background-color: #E84C3D;
  
  cursor: pointer;
}
  .btn::before {
  
  content: "";
  
  position: absolute;
  
  top: 50%;
  
  left: 50%;
  
  transform: translate(-50%, -50%);
  
  width: 30px;
  
  height: 30px;
  
  border-radius: 50%;
  
  background-color: #fff;
  
  opacity: 0;
  
  transition: all 0.3s ease;
}
  .btn:hover::before {
  
  opacity: 1;
}
  .btn::after {
  
  content: "Click";
  
  position: absolute;
  
  top: 50%;
  
  left: 50%;
  
  transform: translate(-50%, -50%);
  
  font-size: 12px;
  
  color: #fff;
  
  opacity: 0;
  
  transition: all 0.3s ease;
}
  .btn:hover::after {
  
  opacity: 1;
}
 

首先，在HTML部分我们需要添加一个标签，它将作为我们的按钮。

接着，在CSS部分，我们先定义了按钮的基本样式，包括大小、形状、颜色等。然后，我们使用伪元素::before和::after来分别表示按钮点击时的圆形背景和显示的文字。

在按钮未悬停时，这两个元素的opacity属性都为0，即不可见。当用户悬停在按钮上时，我们使用:hover伪类来将它们的opacity属性设置为1，从而实现了圆形背景和文字的出现。

这样，我们就成功地实现了CSS点按钮出现文字的效果。你可以根据实际需要调整相应的样式属性来定制自己的按钮。