css 制作圆形按钮

使用 border-radius 属性

通过将 border-radius 设置为 50%，可以将方形元素变为圆形。按钮的宽度和高度需保持一致。

.circle-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

使用 aspect-ratio 保持比例

结合 aspect-ratio: 1 确保按钮始终为正方形，即使宽度或高度动态变化。

.circle-button {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #e74c3c;
}

添加交互效果

通过 :hover 和 :active 伪类增强用户体验。

.circle-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #2ecc71;
  transition: transform 0.2s;
}

.circle-button:hover {
  transform: scale(1.05);
}

.circle-button:active {
  transform: scale(0.95);
}

使用 SVG 或图标

在圆形按钮内嵌入图标或文本，提升视觉清晰度。

.circle-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9b59b6;
}

响应式圆形按钮

通过百分比单位或 vw/vh 实现按钮的响应式尺寸。

.circle-button {
  width: 10vw;
  height: 10vw;
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
}