1、鼠标经过button变成小手

//css属性
cursor:pointer;

2、清除button默认边框

border: none;

3、清除input默认边框

 outline: 0;

4、设置input中的默认值以及更改其中的样式

//输入框中的默认值
<input type="text" placeholder="请输入XXX">
/* 修改palaceholder样式 */
::-webkit-input-placeholder {
  color: rgb(173, 123, 123);
  }

5、将按钮嵌入input中

遵循子绝父相的原则，相当于移动按钮

<template>
  <div class="father">
      <input type="text" placeholder="请输入XXX">
    <button>按钮</button>
  </div>
</template>

<script>
export default {
name: 'yanshi',
}
</script>

<style scoped>
/* 遵循子绝父相的原则 */
.father{
    position: relative;
}
button{
    position: absolute;
    /* 具体位置视情况而定 */
    top: 3px;
    left: 5px;
}
</style>

效果图就不展示了 更多的是自己尝试和练习，这里只提供思路。

//要悄悄拔尖，然后惊艳所有人喔~