使用div创建按钮并实现交互效果

以下是一个使用div写的按钮示例，具有交互效果：

HTML代码：

<div class='btn'>点击我</div>

CSS代码：

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.btn:hover {
  background-color: #0062cc;
}

解释：

• 使用div标签创建按钮。
• 设置按钮样式：显示为内联块级元素，具有10px上下、20px左右的内边距，背景色为蓝色，文字颜色为白色，圆角为5px，光标为手型，过渡效果为0.3秒的背景色渐变。
• 使用:hover伪类选择器，当鼠标悬停在按钮上时，将背景色变为深蓝色。