Search box design bootstrap 4

<form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5"> 
                <i class="fa fa-globe"></i>
                <input type="text" placeholder="Type your keyword here..." >
                 <span class="inline-search">
                 <button id="search-btn" type="submit" value="Search" ><i class="fa fa-search"></i></button>
                </span>
                </form>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body { background: #e1f5fe;}
        #search-box{padding-left:0;position:relative;}
#search-box input{width:100%;border:0;height:60px;border-radius:25px;outline:none;padding-left:60px;line-height:61px;box-shadow:12px 12px 30px 0 rgba(77,77,119,.10);font-weight:500;color:#8ba2ad;}
#search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;}
#search-box .inline-search{position:absolute;top:10px;right:25px;}
#search-box .inline-search #search-btn{background-image:linear-gradient(to right,#6A1B9A,#9C27B0);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(253, 165, 93, 0.54);margin-left:2px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
#search-box .inline-search #search-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
#search-box .inline-search #transfer-btn{background-image:linear-gradient(to right,#5c5cfd,#d65ffd);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(149, 94, 253, 0.45);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
#search-box .inline-search #transfer-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
 
    </style>