css3按钮提示效果

CSS3是一种功能强大的样式表语言，它可以实现许多炫酷的效果，其中就包括按钮提示效果。

下面通过使用CSS3的:before伪元素来创建按钮提示效果，具体的代码如下所示：

.button {
  position: relative;
}
.button:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.button:hover:before {
  opacity: 1;
}

在上面的代码中，我们首先使用position:relative属性使按钮成为相对定位的元素。然后使用:before伪元素来创建按钮提示框，使用content属性来获取按钮的data-tooltip属性的值，并设置其样式属性，比如在上方显示、背景为黑色、颜色为白色等等。

在伪元素中，我们还设置了opacity属性值为0，并使用了CSS3的过渡效果（transition）来平滑地显示提示框。当鼠标悬停在按钮上时，伪元素的opacity属性被设置为1，从而实现了按钮提示效果。

通过使用CSS3的:before伪元素，我们可以轻松地创建出炫酷的按钮提示效果，让网页用户体验更加丰富和流畅。