body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/hero.jpg) no-repeat center center fixed;
  background-size: cover;
}

.search {
  width: 500px;
  height: 40px;
  margin: 150px auto;
  background: #444;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: 1px solid #fff;
}
.search input {
  width: 370px;
  padding: 10px 5px;
  float: left;
  color: #ccc;
  border: 0;
  background: transparent;
  border-radius: 3px 0 0 3px;
}
.search input:focus {
  outline: 0;
  background: transparent;
}
.search button {
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 120px;
  color: #fff;
  background: transparent;
  border-left: 1px solid #fff;
  border-radius: 0 3px 3px 0;
}
.search button:hover {
  background: #fff;
  color: #444;
}
.search button:active {
  box-shadow: 0px 0px 12px 0px #e1e1e1;
}
.search button:focus {
  outline: 0;
}