vue div卡片样式鼠标浮动出现阴影和按钮

你可以使用CSS的:hover伪类和box-shadow属性来实现鼠标浮动出现阴影的效果，同时在卡片的底部添加一个按钮。以下是一个简单的例子：

HTML代码：

<div class="card">
  <h2>卡片标题</h2>
  <p>卡片内容</p>
  <button>按钮</button>
</div>

CSS代码：

.card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

button {
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 10px 20px;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #0062cc;
}

在这个例子中，我们使用了:hover伪类来设置鼠标浮动时卡片的阴影效果，同时在卡片底部添加了一个蓝色按钮。在CSS中，我们使用box-shadow属性来设置阴影效果，使用transition属性来设置过渡动画效果。按钮的样式使用了border、border-radius、color等属性来设置，同时使用了:hover伪类来设置鼠标浮动时的背景色效果。