LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
LOGIN
CSS
body {
  overflow: hidden;
  color: #FFF;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: url("http://chrismartinphotography.files.wordpress.com/2012/04/prairie-skies-c2a9-2012-christopher-martin-9819.jpg") no-repeat center center fixed;
  background-size: cover;
}
#center {
  width: 500px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -25px;
}
#search,
#search-button,
#login {
  display: inline-block;
}
#search {
  height: 0;
  width: 200px;
  border-top: 40px solid rgba(255, 255, 255, 0.1);
  border-left: 0px solid transparent;
  border-right: 20px solid transparent;
}
#search-button {
  margin-left: -20px;
  height: 0;
  width: 30px;
  border-bottom: 40px solid rgba(255, 255, 255, 0.1);
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
}
#login {
  background: rgba(255, 255, 255, 0.1);
  width: 180px;
  height: 40px;
}
#container-search {
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -230px;
  margin-top: -10px;
}
#container-icon {
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -10px;
}
#container-login {
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 70px;
  margin-top: -10px;
}
Host Instantly Drag and Drop Website Builder

 

Description

Inspired by this: http://dribbble.com/shots/1064024-Simplified-Search-Bar-Button?list=tags&tag=web_design
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID