<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700"> <form class="search"> <div class="search__wrapper"> <input type="text" name="" placeholder="Search for..." class="search__field"> <button type="submit" class="fa fa-search search__icon"></button> </div> </form>

.search { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .search * { outline: none; box-sizing: border-box; } .search__wrapper { position: relative; } .search__field { width: 50px; height: 50px; color: transparent; font-family: Lato, sans-serif; font-size: 1.35em; padding: 0.35em 50px 0.35em 0; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: all 0.3s ease-in-out; } .search__field:focus { border-bottom-color: #ccc; width: 50vw; color: #2b2b2b; cursor: default; } .search__field:focus ~ .search__icon { background-color: transparent; cursor: pointer; pointer-events: auto; } .search__icon { position: absolute; top: 0; right: 0; background-color: #e9f1f4; width: 50px; height: 50px; font-size: 1.35em; text-align: center; border-color: transparent; border-radius: 50%; pointer-events: none; display: inline-block; transition: background-color 0.2s ease-in-out; } .search__field::-webkit-input-placeholder { position: relative; top: 0; left: 0; transition-property: top, color; transition-duration: .1s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .search__field:-moz-placeholder { position: relative; top: 0; left: 0; transition-property: top, color; transition-duration: .1s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .search__field::-moz-placeholder { position: relative; top: 0; left: 0; transition-property: top, color; transition-duration: .1s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .search__field:-ms-input-placeholder { position: relative; top: 0; left: 0; transition-property: top, color; transition-duration: .1s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .search__field::-webkit-input-placeholder[style*=hidden] { color: #83b0c1; font-size: .65em; font-weight: normal; top: -20px; opacity: 1; visibility: visible !important; } .search__field:-moz-placeholder[style*=hidden] { color: #83b0c1; font-size: .65em; font-weight: normal; top: -20px; opacity: 1; visibility: visible !important; } .search__field::-moz-placeholder[style*=hidden] { color: #83b0c1; font-size: .65em; font-weight: normal; top: -20px; opacity: 1; visibility: visible !important; } .search__field:-ms-input-placeholder[style*=hidden] { color: #83b0c1; font-size: .65em; font-weight: normal; top: -20px; opacity: 1; visibility: visible !important; }