How to Create a Beautiful Material Design Login Form with HTML & CSS
Google’s Material Design concept seems to catch the attention of the majority of designers and developers. This might be due to the fact that it is created to ease user interaction and focus on a pleasant user experience.
In the guidelines, Google developers clearly state that material design is a visual language of good design and motion in the interface is meaningful and helps the user.
In the login form I am showing you today, those guidelines are applied in a common user interaction as logging in.
This is a simple example with two inputs required but the same principle can be applied in longer and more complicated forms where instant feedback is required for better user interaction.
I have this problem with a register forms on my mobile phone – I just forget what I am supposed to fill in as sometimes there is no clear feedback. For example, the forms with the placeholder – when you click inside the input box, the required info disappears and if you get a bit distracted – you have to go back and start all over.
With the form below, there is no such issue, as the required info (included as a placeholder) is displayed on the top of the input box and you know what is supposed to be filled in.
Have a look at the markup to see how it is done:
HTML
<form> <h1>Material Design Login Form</h1> <input placeholder="Username" type="text" required=""> <input placeholder="Password" type="password" required=""> <button>Submit</button> </form>
CSS
h1 { height: 100px; width: 100%; font-size: 18px; background: #18aa8d; color: white; line-height: 150%; border-radius: 3px 3px 0 0; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2); } 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; -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); 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; -webkit-transform: translateY(-20px); 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 { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2); } The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect. input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder { color: #1abc9c; font-size: 11px; -webkit-transform: translateY(-20px); transform: translateY(-20px); visibility: visible !important; }
Here is the form:
More Material Design Resources:
Materialize CSS – Framework based on Material Design
Photoshop/Illustrator Tutorial: Google Material Design for Apps
The form is created by Kennedy Hudson on cssdeck.com
awesome my friend! I would like to retain the placeholder after typing, it is possible?
Hey there,
Thanks for visiting..
Not sure that I understand. The placeholders are visible after you start typing your username and password… What do you mean?
Cheers,
Petia
Great and easy example. Anyway there’s a problem on firefox. When you click on username or password the label don’t animate. Works properly in chrome.
How we can solve that?
Thanks
Thanks for visiting.
I will need some time to check the example in Mozilla. Meanwhile, this might be helpful for you:
http://www.cssscript.com/demo/pure-css-floating-labels-for-text-fields/
Cheers:)
Hi,
thanks for the reply. The problem with that approach is that a lot of time the label doesn’t animate and stuck on top of the prefilled box.
Just to be more clear if you do something like that:
<form id="login" ng-if="login" ng-submit="user.login()" id="login" style="opacity: 0" ng-style="{opacity:1}"
Name
Password
Submit
If you save the username and the pwd the next time you’ll see that the Password label will stay inside the input covering the prefilled pwd.
That problem is always evident on Chrome (firefox works fine)
Strange issue.. Have you managed to make it work?
I think jQuery might be needed to make the animated label work if you are keen on adding some. I can’t do much without the actual code though. Have a look at this example: http://codepen.io/joshadamous/pen/yyyqJZ
If you want me to have a look, put the code in codepen or cssdeck for me to see.
Thanks.
oh no I don’t think so. I think that your solution is the best one because you don’t need other label or something like that. You should just manage the animation on firefox.
The part of the css that doesn’t work (works only for chrome) is:
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
we should add that:
input:focus:-moz-placeholder
the color change with that one the only problem is that it soesn’t animate
Cheers
Yep, figured out that this is the code part that it problematic. Will check it out later.
Thanks and all the best:)))
any news about ff?
Here we go:
http://cssdeck.com/labs/gjuhcfo0
Let me know.
Sorry, too busy lately. Will try to get into it today. 🙂