如何实现参考图所示的邮件输入框与按钮效果？求对应CSS代码

HTML 结构 #

<form class="email-form">
  <input type="email" placeholder="请输入邮箱地址" class="email-input" required>
  <button type="submit" class="submit-btn">提交</button>
</form>

CSS 样式 #

.email-form {
  display: flex;
  max-width: 480px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.email-input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  outline: none;
  font-size: 15px;
}

.email-input::placeholder {
  color: #aaa;
}

.submit-btn {
  padding: 12px 28px;
  border: none;
  background: #2f80ed;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #2563eb;
}

/* 移动端适配 */
@media (max-width: 500px) {
  .email-form {
    flex-direction: column;
    border-radius: 8px;
  }
  .email-input {
    border-radius: 8px 8px 0 0;
  }
  .submit-btn {
    border-radius: 0 0 8px 8px;
  }
}

你可以根据实际需求调整以下参数：

• 修改border-radius数值调整圆角大小
• 修改.submit-btn的background属性更换按钮颜色
• 修改padding数值调整控件高度

内容的提问来源于stack exchange，提问作者Ch Qasim