css 制作圆形按钮

使用CSS制作圆形按钮的方法

设置基础按钮样式 创建一个基础的按钮元素，设置宽度和高度相等，确保按钮为正方形。例如：

.circle-button {
  width: 100px;
  height: 100px;
}

添加圆角属性 使用border-radius属性将正方形按钮变为圆形。将值设为50%：

.circle-button {
  border-radius: 50%;
}

添加交互效果 为按钮添加悬停和点击效果，提升用户体验：

.circle-button {
  transition: all 0.3s ease;
}
.circle-button:hover {
  transform: scale(1.1);
}

完整示例代码

<button class="circle-button">Click</button>

<style>
.circle-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.circle-button:hover {
  background-color: #45a049;
  transform: scale(1.1);
}
</style>

其他实现方式 使用伪元素创建圆形按钮：

.circle-button::before {
  content: "";
  display: block;
  padding-top: 100%;
  border-radius: 50%;
}

响应式圆形按钮 使用vw单位创建响应式圆形按钮：

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