Hot File

Design guidelines Login Form With HTML5 and CSS

View: 3335    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

0 point/3 review File has been tested

Today I will share with you another login form designs with simple effect but very eye-catching. With this design, you can replace the sample form is used for your website or blog.

Introduction

Today I will share with you another login form designs with simple effect but very eye-catching. With this design, you can replace the sample form is used for your website or blog.

HTML

First, you copy the html standard framework for the login form as follows:

<form>
  <h1>Login</h1>
  <input placeholder="Username" type="text" required="">
  <input placeholder="Password" type="password" required="">
  <button>Submit</button>
</form>

CSS

Next, you format the entire form with css following paragraph:

form {
  box-sizing: border-box;
  width: 260px;
  margin: 100px auto 0;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
  padding-bottom: 40px;
  border-radius: 3px;
}
form h1 {
  box-sizing: border-box;
  padding: 20px;
}
 
input {
  margin: 40px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}
input:focus, input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  transform: translateY(-20px);
  visibility: visible !important;
}
 
button {
  border: none;
  background: #1abc9c;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: 200px;
  color: white;
  margin-left: 25px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}

Good luck !

Design guidelines Login Form With HTML5 and CSS

Design guidelines Login Form With HTML5 and CSS Posted on 15-12-2015  Today I will share with you another login form designs with simple effect but very eye-catching. With this design, you can replace the sample form is used for your website or blog. 5/10 3335

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd