* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

我想这就是你需要的

.pt-site-footer__submit{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  min-width: 320px;
}

button {
  position: absolute;
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  cursor:pointer;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

Please try to given css

button {
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.pt-site-footer__submit {
    width: auto;
    float: left;
    position: relative;
}

.pt-site-footer__submit{
      position: relative;

}
input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;
        width: 94%;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

  button {
    background: #16bdae;
    border: 0;
    position: absolute;
    border-radius: 7px;
    color: white;
    padding: 6px 15px;
    right: 0;
    top: 0;
    bottom: 0;
    height: 38px;
    margin: auto;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

input标签是一个自关闭标签，你不能放置子标签。也许你可以添加一个 Package 器元素，你应该像它是一个输入一样设置它的样式，并在你的输入上设置透明背景。例如：

<div class="pt-site-footer__submit">
   <div class="input-wrapper">
       <input type="email" placeholder="Your e-mailadress">
       <button>LOGIN</button>
   </div>
</div>

其风格大致如下：

input {
    width: calc(100% - [BUTTON-WIDTH]);
    border: 0;
    color: white;
    background-color: transparent;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: white;
    }
}

button {
    width: [BUTTON-WIDTH];
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
}

input-wrapper {
    background: #8196aa;
    border: 0;
    border-radius: 10px;
    padding: 20px;
}

如果需要，我们还可以使用flexbox或css网格来绘制和居中此组件

严格地说，您不能将按钮放在input中，因为input元素没有这种意义上的内容。
您可以做的是绝对定位按钮，然后使用translate将其恢复，以覆盖输入，从而给予相同的视觉效果。
这里有一个代码片段可以做到这一点，但是你必须考虑给予多少填充和多少按钮回来，以便不覆盖一些占位符。

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  position: relative;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  transform: translate(calc(-100% - 5px), 5px);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

@Abin Thaha提供了一个很好的答案。我只会对答案中发布的css做一个修改。
将padding-right: 100px;添加到input css中，以防止登录按钮下出现长文本：

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  padding-right: 100px; /* <---------- Added right padding here to prevent text flowing under button */
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>