I want to make this type of field and Button in my form can anybody write CSS for this.

CodePudding user response：

You should try yourself and if you face any issue, then you should post issue here but if you dont know how to do it, then here is little code that can help you.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    *{
        background-color: #f2f2f2;
    }
input{
border-radius: 30px;
padding: 7px;
}
.btn{
    background-color:#303075;
    color:white;
    padding: 10px 25px;
    text-align: center;
    margin-left: -85px;
    border-radius: 30px;
    padding: 7px;


    
}
i::before{
    background:transparent;
}
.email-area{
    padding: 15px 50px;
    border-style: none;
    text-align: left;
    background-color: white;
   
}
    
}
</style>



<div class="container">
    <input type="text" class="email-area"  placeholder="Enter your email">
    <!-- <input type="button" class="btn font-awesome"  value="Submit" > -->
    <button class="btn"><i class="fa fa-send"></i> Submit</button>
</div>