Html 如何在按钮内移动图像？

我对css很陌生。我知道了如何在按钮中放置图像，以及如何使用填充在按钮的矩形内移动图像。但当我开始在页面上添加更多按钮时，每个按钮上的填充都发生了变化。我想这是因为我需要一些东西，但一旦我开始使用div，我不知怎么搞砸了填充物，我不知道如何修复它。我试着在按钮内居中（使用顶部百分比和平移）图像，但它只是移动整个按钮。我需要一种方法，使我的页面上每个按钮上的每个图片居中，或者至少有填充，这样我就可以为每个单独的图像居中

底部的按钮正是我想要的，但顶部的按钮没有居中，因为图像大小不同。但当我更改其中一个按钮的代码时，另一个按钮也会更改

.按钮{
背景色：#FFC627；
边界：无}；
边界半径：20px；
颜色：白色；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润率：4px20px；
光标：指针；
高度：200px；
宽度：200px；
}
.角色和责任{
填充顶部：10px；
垫底：4px；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
.按钮：悬停{背景色：#5C6670}
.扣子{
背景色：#5C66703
变换：translateY（4px）；
}

你能不能也给我一张按钮的图片，无论是正常的还是不正常的？请编辑你的问题，并将你的HTML和CSS作为代码发布，而不是图片链接。