尝试使用display: flex;的按钮，并尝试调整图像的像素像width: 20px;和height: auto;或反之亦然，它应该修复它。

下面是我的想法：https://jsfiddle.net/L1ma5qrc/86/

*{
  margin: 0;
  padding: 0;
}

body{
padding: 20px
}
#but1 {
  /* margin-right: 5px; */
  /* background-color: transparent; */
  border: 0;
  background-color: #fff;
  width: 50%;
  height: 50px;
  border-radius: 125px;
  border: 1px solid lightgray;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#but1:before {
  content: "";
  display: block;
  background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
  background-size: 50%;
  background-position: center right;
  height: 50px;
  width: 50px;
  margin-right: 16px;
  margin-left: auto;
}

#but2 {
  /* margin-right: 5px; */
  /* background-color: transparent; */
  border: 0;
  background-color: #fff;
  width: 50%;
  height: 50px;
  border-radius: 125px;
  border: 1px solid lightgray;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#but2:before {
  content: "";
  display: block;
  background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
  background-size: 50%;
  background-position: center left;
  height: 50px;
  width: 50px;
  margin-right: auto;
  margin-left: 16px;
}

<div>
      <div class="button-container" id="but-cont-1">
        <button id="but1">
        </button>
      </div>
      <div class="button-container" id="but-cont-2">
        <button id="but2">
        </button>
      </div>
    </div>

我想我会考虑将图片作为背景，这样可以清理标记，使定位更容易。
其他提示：

• 不要使用浮动对齐。它们是过时的布局技术，已经很少有合适的用途了。
• 尽可能避免绝对定位，这也会很麻烦。
• 浮点数不适用于绝对定位。必要时可以使用其中一个。
• 在CSS中少依赖ID。理想情况下，所有内容都是基于类的，因此可以重用。
• 考虑不要删除大纲。大纲对于可访问性很重要。
• 避免在表单输入之外使用标签元素。这将是不标准的，也可能是一个可访问性问题。

.button-container {
  background-color: #fff;
  width: 50%;
  height: 50px;
  border-radius: 125px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.button-container.alt {
  margin-top: 25px;
  background-color: #79b2f7;
}

.button-container button {
  width: 100%;
    height: 100%;
    background-size: auto 60%;
    background-position: 93% 50%;
    background-repeat: no-repeat;
    border: 0;
}

.button-container button.icon-recycle {
  background-image: url("https://cdn-icons-png.flaticon.com/512/861/861180.png");
}

.button-container button.icon-trash {
  background-image: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png");
  background-position: 7% 50%;
}

#textarea {
  position: absolute;
  width: 85%;
  background-color: transparent;
  border: 0;
  height: 100%;
  outline: none;
  resize: none;
}

.text {
  width: 100%;
  background-color: transparent;
  border: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  right: 21px;
}

<div>
  <div class="button-container">
    <textarea id="textarea" name="prod"></textarea>

    <button class="icon-recycle" onclick="sub()"></button>
  </div>

  <div class="button-container alt">
    <span class="text"></span>

    <button class="icon-trash"></button>
  </div>
</div>