当前位置：首页 > CSS

制作圆形按钮css

2026-02-13 08:10:06CSS

基础圆形按钮样式

使用CSS的border-radius属性可以轻松创建圆形按钮。关键是将border-radius设置为50%，并将宽度和高度设为相同值：

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

悬停和点击效果

为圆形按钮添加交互状态提升用户体验：

.circle-btn:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

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

响应式圆形按钮

使用aspect-ratio属性确保按钮在不同尺寸下保持圆形：

.responsive-circle {
  width: 20vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

带图标的圆形按钮

结合Font Awesome或SVG图标创建更丰富的圆形按钮：

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #2ecc71;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

圆形按钮动画效果

添加CSS动画使按钮更具吸引力：

.pulse-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e74c3c;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

圆形按钮边框样式

创建带有特殊边框效果的圆形按钮：

.bordered-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: transparent;
  border: 5px dashed #9b59b6;
  color: #9b59b6;
  position: relative;
  transition: all 0.3s;
}

.bordered-circle:hover {
  border-style: solid;
  background: rgba(155, 89, 182, 0.1);
}

这些CSS技巧可以根据具体设计需求组合使用，创造出各种风格的圆形按钮效果。通过调整颜色、尺寸、阴影和动画参数，可以定制出符合项目视觉风格的圆形按钮组件。

制作圆形按钮css