CSS按钮加入图片是设计网页时一个很常见的需求。如今，我们不仅可以使用纯CSS方法实现按钮样式的设计，还可以在CSS按钮内部加入图片来丰富按钮的视觉效果。

.btn {background-color: #52c41a;  /* 设置按钮背景颜色 */color: #fff; /* 设置字体颜色 */border: none; /* 去掉边框 */padding: 8px 16px; /*设置内边距*/border-radius: 4px; /* 圆角 */font-size: 14px; /* 设置字体大小 */display: inline-block; /* 块级元素 */cursor: pointer; /* 设置鼠标悬停形状 */text-align: center; /* 按钮文本居中 */position: relative; /* 相对定位 */}.btn img {position: absolute; /* 设置图片绝对定位 */top: 50%; /* 让图片位置居中 */left: 50%;transform: translate(-50%, -50%); /* 设置图片偏移位置 */}

代码中的.btn表示要设置的按钮类名，我们先设置好按钮的基本样式，然后在.btn后添加img这个标签，就可以将图片加入按钮中了。在img标签中设置position:absolute,并通过top、left以及transform属性来让图片居中，并且不影响按钮的其他样式。

在HTML中使用代码如下：

<button ><img src="/post/image/button-icon.png">按钮</button>

在按钮中加入图片后，不仅让按钮变得更加丰富多彩，还能增加用户体验的互动和趣味性。如果您正在设计网页，那么不妨试试在CSS按钮里面加上图片来优化您的页面吧！