当前位置：首页 > CSS

css制作加号按钮

2026-02-13 11:36:22CSS

使用伪元素实现加号按钮

通过CSS的::before和::after伪元素创建横竖两条线，组合成加号形状。这种方法无需额外HTML元素，兼容性良好。

.plus-btn {
  width: 40px;
  height: 40px;
  position: relative;
  background: #3498db;
  border-radius: 4px;
  cursor: pointer;
}

.plus-btn::before,
.plus-btn::after {
  content: "";
  position: absolute;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-btn::before {
  width: 60%;
  height: 4px;
}

.plus-btn::after {
  width: 4px;
  height: 60%;
}

使用边框旋转实现加号

通过旋转45度并叠加两个矩形边框来创建加号效果。这种方法适合需要动态旋转效果的场景。

.plus-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.plus-icon:before, 
.plus-icon:after {
  content: "";
  position: absolute;
  background: #000;
}

.plus-icon:before {
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
}

.plus-icon:after {
  top: 50%;
  margin-top: -1px;
  height: 2px;
  width: 100%;
}

SVG实现矢量加号

使用内联SVG创建可缩放的矢量加号，适合高分辨率显示需求。

<button class="svg-plus">
  <svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
  </svg>
</button>

.svg-plus {
  background: transparent;
  border: none;
  padding: 8px;
  color: #2c3e50;
  cursor: pointer;
}

.svg-plus:hover {
  color: #e74c3c;
}

纯Unicode符号方案

最简单的实现方式，使用Unicode加号字符，适合快速原型开发。

<button class="unicode-plus">＋</button>

.unicode-plus {
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

交互动画效果

为加号按钮添加点击动画，提升用户体验。

css制作加号按钮

.animated-plus {
  width: 50px;
  height: 50px;
  background: #9b59b6;
  position: relative;
  border-radius: 50%;
  transition: all 0.3s;
}

.animated-plus::before,
.animated-plus::after {
  content: "";
  position: absolute;
  background: white;
  transition: all 0.3s;
}

.animated-plus::before {
  width: 24px;
  height: 4px;
  left: 13px;
  top: 23px;
}

.animated-plus::after {
  width: 4px;
  height: 24px;
  left: 23px;
  top: 13px;
}

.animated-plus:hover {
  transform: scale(1.1);
  background: #8e44ad;
}

.animated-plus:active {
  transform: scale(0.9);
}