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

[PHP]

[/PHP]

Design bằng CSS

[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;
}
[/CSS]
Chúc bạn thành công nhé