升高的按钮形状颤动

这是一个用于前端开发的按钮组件，它的形状会随着鼠标的悬停或点击而颤动，增强了交互体验。

特点

• 响应式设计，适应不同屏幕大小
• 鼠标悬停时，形状呈现微小颤动
• 鼠标点击时，形状呈现更加明显的颤动效果

使用方法

添加以下代码到HTML文件中：

<div class="button-container">
  <button class="shaking-button">点击我</button>
</div>

将以下CSS代码添加到样式表中：

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shaking-button {
  position: relative;
  z-index: 1;
  border-radius: 50px;
  border: 2px solid #ccc;
  background-color: #fff;
  color: #000;
  font-size: 1.5rem;
  padding: 10px 30px;
  transition: transform 0.3s ease;
}

.shaking-button:hover {
  transform: translate(1px, 1px);
}

.shaking-button:active {
  transform: translate(2px, 2px);
}

效果展示

<div class="button-container">
  <button class="shaking-button">点击我</button>
</div>