LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
  margin: 5%;
}

.search-box {
  -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, -webkit-box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, -webkit-box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s, -webkit-box-shadow 0.6s;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: #ebebeb;
}
.search-box + label .search-icon {
  color: black;
}
.search-box:hover {
  color: white;
  background: #c8c8c8;
  -webkit-box-shadow: 0 0 0 5px #3d4752;
          box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
  color: white;
}
.search-box:focus {
  -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 300px;
  border-radius: auto;
  background: #ebebeb;
  color: black;
}
.search-box:focus + label .search-icon {
  color: block;
}
.search-box:not(:focus) {
  text-indent: -5000px;
}

#search-submit {
  position: relative;
  left: -5000px;
}

.search-icon {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}

Description

Source: Expanding text box/button
Term
Wed, 01/31/2018 - 11:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv