<form action="#">
<input type="search" placeholder="Phone Number" >
<button type="submit">Send Link</button>
</form>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
form{
display: inline-block;
vertical-align: top;
position: relative;
}
input[type="search"]{
outline: none;
border: 1px solid #222;
padding: 5px 50px 5px 30px;
display: block;
font-size: 16px;
font-weight: 700;
width: 100%;
height: 50px;
background: #7e17da87;
border-radius: 25px;
}
input::placeholder{
color: #fff;
}
button[type="submit"]{
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
z-index: 9;
outline: none;
border: none;
display: inline-block;
background: #fff;
font-size: 16px;
font-weight: 700;
color: #a207ff;
padding: 10px 25px;
border-radius: 25px;
cursor: pointer;
}
button[type="submit"]:hover{
background: #a207ff;
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.