如果你想把文本放高一些，你可以减小margin-top的值。然后使用position:absolute;right:10px;将按钮放在容器的右侧。
试试这个：

<style>
    .last-page {
  background-color: #3882f6;
  font-size: 18px;
  color: aliceblue;
  padding: 10px;
  display: flex;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 50px;
}

.button {
  background-color: #3882f6;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  position: absolute;
  right: 20px;
}

.text {
  margin-right: 75px;
  margin-left: 75px;
  margin-top: 0px;
}
</style>

<div class="last-page">
    <div class="text">
      <p> <strong>Time to action! It's time!</strong> <br> Sign up for our product by clicking that button right over there</p>
    </div>
    <button class="last-page button">Sign Up</button>
  </div>

单击以下链接进行预览：preview image

1.若要使文本稍高一些，请在“”处添加一个负上边距。text”类：
.text { margin：-20px75px0 75px;}
1.要使蓝色正方形的边缘带圆圈，请将"border-radius"添加到“。最后一页”。
1.要将“注册”放在右侧，请在“”上使用"justify-content"。最后一页”
顺便说一句，”。“最后一页”是个糟糕的名字。最好选择一个能清楚反映组件或页面及其功能的名称，这样即使在几年后也能轻松识别，而无需记住应用程序是什么。祝你学习顺利！

我建议在这里使用网格，因为它可以让你控制很多东西，但仍然保持它的响应。

• “魔术”的一部分是按钮display: grid; place-items: center;“超级中心”的跨度内。改变按钮大小，看看会发生什么;不需要任何花哨的重定中心边缘调整或脆弱的定位。
• 添加了一些边框和调整了按钮的颜色背景只是为了说明。
• 基于大多数浏览器的默认值（16px）并设置一些默认值。
• 将p替换为div，因为您似乎需要“标题”和“文本”
• 三列，一列用于左间距，一列用于文本，一列用于按钮。如果您将网格对齐到最后（右侧），您可能会删除第一列。这是一种风格的选择。
• 将左边的大小调整为您想要的任何“边距”10rem，即160 px（请参阅为什么我在正文中设置默认值？）
• 设置一个网格间隙，这是“之间”的每一列1rem;可以是任何你想要的。
• 对于.action-text，我将边距设置为p默认值，因此它可以是任何样式。
• 设置按钮边框半径以匹配大小，使其为圆形;根据需要调整成更长的椭圆形等。
• 按钮在当前的右边，但是你可以放置另一个固定宽度的列，或者只是1fr等。向右或按需要放一个右边距，以便放置得更好;

一定要在这里的“全页”中显示这一点，并调整浏览器的大小，这样你就可以看到它是如何React的。

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border;
}

.last-page {
  display: grid;
  grid-template-columns: 10rem auto 1fr;
  gap: 1rem;
  background-color: #3882f6;
  font-size: 1.25rem;
}

.text {
  grid-column: 2;
}

.button {
  grid-column: 3;
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  background-color: #9bc0fa;
  color: #ffffff;
  border: 0.25em solid #FFFFFF44;
  border-radius: 4em;
  width: 4em;
  height: 4em;
}

.action-text {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  color: aliceblue;
}

.action-header {
  font-weight: 600;
}

<div class="last-page">
  <div class="text">
    <div class="action-text">
      <strong class="action-header">Time to action! It's time!</strong>
      <div class="action-message">Sign up for our product by clicking that button right over there</div>
    </div>
  </div>
  <button class="button"><span>Sign Up</span></button>
</div>