CoolSearch

by evgkch

HTML

<div class="app">
  <div class="search">
      <input type="text" name="query" autocomplete="off" />
      <button type="submit">
        <img src="https://1.bp.blogspot.com/-iROq5PWOGrM/VtcEcoMNu1I/AAAAAAAAXmc/hWU43NkhZ38/s1600/icon.png" alt="submit" />
      </button>
  </div>
</div>

CSS

body {
  background-color: white;
}

.app {
  padding: 15px;
}

.search {
  text-align: center;
  margin: 0 auto;
}


button[type="submit"]:focus, input[name="query"]:focus {
  outline: none;
}
input[name="query"]:focus {
  color: #00AAE7;
  border-color: #00AAE7;
}
input[name="query"] {
  height: 50px;
  padding-right: 50px;
  border: none;
  border-bottom: solid 3px #d6d6d6;
  font-size: 18pt;
  font-weight: bold;
  color: #d6d6d6;
  transition: all 0.3s;
}
button[type="submit"] {
  border: none;
  right: 50px;
  bottom: 5px; 
  padding: 0;
	position: relative;
	vertical-align: middle;
  user-select: none;
  color: whitesmoke;
  background: transparent;
  transition: all 0.3s;
  -webkit-filter: opacity(15%);
  cursor: pointer;
}

img {
  width: 50px;
  height: 50px;
}

button[type="submit"]:hover {
  -webkit-filter: opacity(65%);
}