HTML

<form action="">

  <h1>Flock</h1>
  <input class="user" type="text" placeholder="username" />
  <input class="pass" type="password" placeholder="password" />
  <input class="btn"  type="submit" value="SIGN IN" />

  <hr style="background-color : #bebebe;"/>
  <hr style="background-color : #FFF; "/>

  <h5>Forgot your password? <a href="">click here</a></h5>

<div class="setting">
    <a class="icon-cog" href="#"></a>
    <h6  class="set">settings</h6>
    <div class="middle" style="left : 6px;"></div>
    <div class="middle" style="left : 18px;"></div>
    <div class="middle" style="left : 30px;"></div>
    <div class="middle" style="left : 42px;"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>

</form>

CSS

@import url("http://fonts.googleapis.com/css?family=Berkshire+Swash");		
@import url("http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css");
* {
  padding : 0;
  margin  : 0;
  border  : 0;
  outline : 0;
  font-family: Arial;
}

body {
  background-color : #917975;
  padding-top      : 50px;
}

form {
  position : relative;
  width  : 340px;
  height : 380px;
  border-radius : 5px;
  margin : 0 auto;
  background-color: #e3e3e3;
  border-top : 1px solid #f1f1f1;
  box-shadow : 0 0 0 1px #626262 , 0 0 0 6px rgba(150,150,150,.5) , 0 0 0 7px #cbbdbc , 0 0 0 8px #78495b;
  text-align : center;
}

h1 {
  margin     : 10px 0 20px 0;
  font-size  : 75px;
  color      : #b8b8b8;
  font-family: 'Berkshire Swash', cursive;
  text-shadow: 1px 1px 0 #888 , 2px 2px 0 #ccc; 
}

input {
  display    : block;
  height     : 48px;
  margin     : 0 auto 17px;
  text-align : center;
  width      : 266px;
  border-radius : 5px;
}

.user , .pass {
  font-size      : 20px;
  background: -moz-linear-gradient(top,  rgba(213,213,213,1) 0%, rgba(213,213,213,1) 13%, rgba(215,215,215,1) 30%, rgba(222,222,222,1) 71%, rgba(221,221,221,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(213,213,213,1) 0%,rgba(213,213,213,1) 13%,rgba(215,215,215,1) 30%,rgba(222,222,222,1) 71%,rgba(221,221,221,1) 100%);

  box-shadow: inset 0 0 3px 1px #ccc; 

  border-top : 1px solid #aaa;
  border-bottom : 1px solid #eee;

  color          : #555;
}

.btn {
  margin-bottom : 30px;
  color         : #fefefe;
  text-shadow   : 0 1px 0 #777;
  border        : 1px solid #b6733c;
  box-shadow    : inset 0 0 1px 1px #ffcb9c;
  text-transform : uppercase;
  background: -moz-linear-gradient(top,  rgba(249,159,107,1) 0%, rgba(238,148,96,1) 57%, rgba(236,146,94,1) 89%, rgba(232,144,94,1) 94%, rgba(234,146,96,1) 96%, rgba(244,161,111,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(249,159,107,1) 0%,rgba(238,148,96,1) 57%,rgba(236,146,94,1) 89%,rgba(232,144,94,1) 94%,rgba(234,146,96,1) 96%,rgba(244,161,111,1) 100%);

  font-size      : 17px;
}

.btn:hover {
  cursor : pointer;
  background: -moz-linear-gradient(top,  rgba(244,161,111,1) 0%, rgba(234,146,96,1) 4%, rgba(232,144,94,1) 6%, rgba(236,146,94,1) 12%, rgba(238,148,96,1) 43%, rgba(249,159,107,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(244,161,111,1) 0%,rgba(234,146,96,1) 4%,rgba(232,144,94,1) 6%,rgba(236,146,94,1) 12%,rgba(238,148,96,1) 43%,rgba(249,159,107,1) 100%);
}

.user:focus , .pass:focus {
  box-shadow    : inset 0 0 1px 1px #ffcb9c;
  border        : 1px solid #b6733c;
  transition    : all .2s ease-in;
}

hr {
  height : 1px;
  width  : 270px;
  margin : auto;
}

h5 {
  margin-top : 10px;
  color      : #7d7d7d;
}

a {
  text-transform  : capitalize;
  text-decoration : none;
  color  : #4e4e4e;
}

::-webkit-input-placeholder {
  color          : #929292;
  font-size      : 17px;
  text-transform : uppercase;
}

:-moz-placeholder {  
  color          : #929292;
  font-size      : 17px;
  text-transform : uppercase;
}

/* setting */

.setting {
  background: -moz-linear-gradient(top,  rgba(238,134,135,1) 0%, rgba(235,129,131,1) 2%, rgba(223,107,107,1) 7%, rgba(223,101,98,1) 11%, rgba(225,100,96,1) 13%, rgba(229,102,96,1) 14%, rgba(227,105,100,1) 27%, rgba(225,102,97,1) 29%, rgba(225,102,97,1) 41%, rgba(223,100,95,1) 43%, rgba(225,102,97,1) 48%, rgba(223,100,95,1) 55%, rgba(225,102,97,1) 57%, rgba(225,102,97,1) 70%, rgba(223,100,95,1) 71%, rgba(225,102,97,1) 98%, rgba(223,100,95,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(238,134,135,1) 0%,rgba(235,129,131,1) 2%,rgba(223,107,107,1) 7%,rgba(223,101,98,1) 11%,rgba(225,100,96,1) 13%,rgba(229,102,96,1) 14%,rgba(227,105,100,1) 27%,rgba(225,102,97,1) 29%,rgba(225,102,97,1) 41%,rgba(223,100,95,1) 43%,rgba(225,102,97,1) 48%,rgba(223,100,95,1) 55%,rgba(225,102,97,1) 57%,rgba(225,102,97,1) 70%,rgba(223,100,95,1) 71%,rgba(225,102,97,1) 98%,rgba(223,100,95,1) 100%);

  background : #e06560;

  position : absolute;
  top      : -2px;
  left     : 10px;
  width    : 60px;
  height   : 5px;
  border-top   : 1px solid #9d5958;
  transition : height .7s;
}

form:hover .setting  {
  height : 70px;
  transition : height .7s;
}

form:hover h6.set {
  font-size : 0.67em;
  transition : font-size .7s;
}

form:hover .icon-cog {
  transition : font-size .7s;
  font-size : 42px;
}

.setting > div {
  position : absolute;
}

.setting .middle {
  border-style : solid;
  border-width : 12px 6px 0 6px;
  border-color : transparent;
  border-top-color   : #e06560;
  top      : 100%;
}

.setting .side {
  border-style : solid;
  top      : 100%;
}

.icon-cog {
  position   : relative;
  display    : block;
  font-size  : 0;
  color      : #bb4140;
  transition : font-size .7s;
}

h6.set {
  position   : relative;
  color      : #bb4140;
  text-transform : uppercase;
  font-size  : 0;
  transition : font-size .7s;
}

.side.left {
  border-width : 12px 6px 0 0;
  border-color : #e06560 transparent transparent transparent;
  left         : 0;
}

.side.right {
  border-width : 12px 0 0 6px;
  border-color : #e06560 transparent transparent transparent;
  right        : 0;
}

Java script

ندارد

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید

See the Pen Flock Login by Mojtaba Seyedi (@new) on CodePen