Hướng dẫn thiết kế form login đẹp mắt

Hôm nay mình sẽ hướng dẫn các bạn thiết kế một form login mang phong cách mới nhìn rất lạ mắt.

Hình ảnh demo form login

Thiết kế HTML

<div class="formCont">
  <div class="brTop"></div>
  <form action="#">
    
    <div class="inputForm">
      <span class="prefix"><span class="entypo-user"></span></span>
      <input type="text" placeholder="Username"/>  
    </div>
    <br />
    <div class="inputForm">
      <span class="prefix"><span class="entypo-key"></span></span>
      <input type="password" placeholder="Password" />
      <span class="sufix"><span class="entypo-lock"></span></span>
    </div>
  </form> 
  <div class="triangle"></div>  
  
  <h2>SIGN IN</h2>
  <span class="flRight">forgot?</span>
  
</div>

</div>

<br />

</div>

</form>

<span class="flRight">forgot?</span>

</div>

Design bằng CSS

@import url(https://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Maven+Pro);
/* zocial */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Maven Pro', sans-serif;
}

body {
  background: #4f6d82;
}

h2 {
  color: #95a5a6;
  margin-left: 20px;
  font-size: 30px;
  margin-top: -10px;
  font-weight: normal;
  display: inline-block;
}

.formCont {
  width: 400px;
  margin: 50px auto;
}

form {
  background: #2c3e50;
  padding: 20px;
}

input {
  border: 0;
  padding: 10px;
}

input:focus {
  outline-color: rgba(0, 0, 0, 0);
}

.inputForm {
  width: 100%;
  background: white;
  border-radius: 3px;
  overflow: hidden;
}

.prefix {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 100%;
  padding: 10px;
  background: #dedee0;
  text-align: center;
  color: #777777;
}

.sufix {
  display: inline-block;
  position: relative;
  float: right;
  width: 50px;
  height: 100%;
  padding: 10px;
  background: #dedee0;
  text-align: center;
  color: #777777;
}

.brTop {
  border-radius: 3px 3px 0px 0px;
  height: 5px;
  background: #16a085;
  background: -moz-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #16a085), color-stop(40%, #1abc9c), color-stop(100%, #2980b9));
  background: -webkit-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);
  background: -o-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);
  background: -ms-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);
  background: linear-gradient(135deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#16a085', endColorstr='#2980b9',GradientType=1 );
}

/*
.brTop { 
  height: 8px;
  background: #c4e17f;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
*/
.triangle {
  position: relative;
  top: -21px;
  left: 50px;
  margin: 0;
  height: 0;
  width: 0;
  border-top: 15px solid #2c3e50;
  border-bottom: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(225deg);
}

.flRight {
  float: right;
  margin-right: 25px;
  text-decoration: underline;
  color: #95a5a6;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

@import url(http://weloveiconfonts.com/api/?family=entypo);

@import url(http://fonts.googleapis.com/css?family=Maven+Pro);

/* zocial */

[class*="entypo-"]:before {

font-family: 'entypo', sans-serif;

}

*:before,

*:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

font-family: 'Maven Pro', sans-serif;

}

body {

background: #4f6d82;

}

h2 {

color: #95a5a6;

margin-left: 20px;

font-size: 30px;

margin-top: -10px;

font-weight: normal;

display: inline-block;

}

.formCont {

width: 400px;

margin: 50px auto;

}

form {

background: #2c3e50;

padding: 20px;

}

input {

border: 0;

padding: 10px;

}

input:focus {

outline-color: rgba(0, 0, 0, 0);

}

.inputForm {

width: 100%;

background: white;

border-radius: 3px;

overflow: hidden;

}

.prefix {

display: inline-block;

position: relative;

width: 50px;

height: 100%;

padding: 10px;

background: #dedee0;

text-align: center;

color: #777777;

}

.sufix {

display: inline-block;

position: relative;

float: right;

width: 50px;

height: 100%;

padding: 10px;

background: #dedee0;

text-align: center;

color: #777777;

}

.brTop {

border-radius: 3px 3px 0px 0px;

height: 5px;

background: #16a085;

background: -moz-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #16a085), color-stop(40%, #1abc9c), color-stop(100%, #2980b9));

background: -webkit-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);

background: -o-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);

background: -ms-linear-gradient(-45deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);

background: linear-gradient(135deg, #16a085 0%, #1abc9c 40%, #2980b9 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#16a085', endColorstr='#2980b9',GradientType=1 );

}

.brTop {

height: 8px;

background: #c4e17f;

border-radius: 3px 3px 0 0;

background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

}

.triangle {

position: relative;

top: -21px;

left: 50px;

margin: 0;

height: 0;

width: 0;

border-top: 15px solid #2c3e50;

border-bottom: 15px solid transparent;

border-right: 15px solid transparent;

transform: rotate(225deg);

}

.flRight {

float: right;

margin-right: 25px;

text-decoration: underline;

color: #95a5a6;

}

Chúc bạn thành công nhé

Hình ảnh demo form login

Thiết kế HTML

Design bằng CSS

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu