{"id":124,"date":"2022-02-21T07:35:00","date_gmt":"2022-02-21T07:35:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2022\/02\/21\/login-form-with-floating-label-using-html-css\/"},"modified":"2023-01-05T20:17:21","modified_gmt":"2023-01-05T20:17:21","slug":"login-form-with-floating-label-using-html-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/login-form-with-floating-label-using-html-css\/","title":{"rendered":"Login Form with Floating Label using HTML &#038; CSS"},"content":{"rendered":"<style>\n  p{font-size:19px;<br \/>\n    color: #292828;<br \/>\n    font-family: sans-serif;<br \/>\n    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjRMkJ4TLpjE_hV2N-4jVD9ppwqliiuvoQvlodONsXoMKQHIfD475rd2dYZdCuBy1PU_7SoLkDiuLWb9FBGGfysJbulnYnjatBjHyrD7I7kqJflCgaxSiQSlugIaFlOSWC_7M4ChdaBpaYuLU2_381uDQvursCZE5Gm-w0D9q_grfA67JWknnOQkz2DAA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Login Form with Floating Label using HTML &amp; CSS\" border=\"0\" data-original-height=\"502\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjRMkJ4TLpjE_hV2N-4jVD9ppwqliiuvoQvlodONsXoMKQHIfD475rd2dYZdCuBy1PU_7SoLkDiuLWb9FBGGfysJbulnYnjatBjHyrD7I7kqJflCgaxSiQSlugIaFlOSWC_7M4ChdaBpaYuLU2_381uDQvursCZE5Gm-w0D9q_grfA67JWknnOQkz2DAA=s16000\" title=\"In this article, you will learn how to create a Login Form with Floating Label using HTML and CSS. Earlier I shared with you the design of different types of login forms.\"><\/a><\/div>\n<p style=\"text-align: left;\">In this article, you will learn how to create a Login Form with Floating Label using HTML and CSS. Earlier I shared with you the design of different types of <a href=\"https:\/\/foolishdeveloper.com\/2022\/01\/animated-login-form-design.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">login forms<\/span><\/a>. However, <b>Floating Label animation<\/b> has been added to this <a href=\"https:\/\/foolishdeveloper.com\/2021\/09\/transparent-login-form-with-html-and.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">login form<\/span><\/a>.<\/p>\n<p>I used HTML and CSS to create this project (Login Form with Floating Label Animation). In normal forms, the label is fixed above the<b> input box<\/b>.<\/p>\n<p>This label is in the input box. As you click on the input box, the <span style=\"color: #2b00fe;\">label will move upwards<\/span>. Usually, we use a <b>placeholder<\/b> in the input box. However, in many cases, the label is used.<\/p>\n<h2 style=\"font-size: 30px; text-align: left;\">Login Form with Floating Label<\/h2>\n<p style=\"text-align: left;\">It is much more modern and beautiful than the ordinary input box. I used only HTML and CSS to create this <a href=\"https:\/\/foolishdeveloper.com\/2021\/09\/how-to-create-popup-login-form-using.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">modal login form<\/span><\/a> with <b>floating labels<\/b>. No JavaScript is used here.<br \/>\n&nbsp;<br \/>\nBelow I have given a demo that will help you to know how it works. Here you will find the required source code and preview.<\/p>\n<p class=\"codepen\" data-default-tab=\"result\" data-editable=\"true\" data-height=\"437\" data-preview=\"true\" data-slug-hash=\"PoORWVG\" data-theme-id=\"light\" data-user=\"foolishdevweb\" style=\"align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 437px; justify-content: center; margin: 1em 0px; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/foolishdevweb\/pen\/PoORWVG\" target=\"_blank\" rel=\"noopener\"><br \/>\nLogin Form With Floating label<\/a> by Foolish Developer (<a href=\"https:\/\/codepen.io\/foolishdevweb\" target=\"_blank\" rel=\"noopener\">@foolishdevweb<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div><\/div>\n<p style=\"text-align: left;\">As you can see above, two input boxes have been created here. One label at a time has been used for the input box. Which is in that input box.&nbsp;<\/p>\n<p style=\"text-align: left;\">When you click on that input box, the label will go up a bit. This will change the color of the input box and label.<\/p>\n<h2 style=\"font-size: 29px; text-align: left;\">How to Create Animated Form Label in CSS<\/h2>\n<p style=\"text-align: left;\">This <b>Login Form with Floating Label<\/b> is not very nice. But it will help you to understand how to create a Floating Label in the input box.<\/p>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1:<\/span>&nbsp;Basic structure of login form<\/h3>\n<p style=\"text-align: left;\">The following HTML code is the basic structure of this login form. Then the webpage is designed by CSS.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;form&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&lt;\/form&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">body {<\/div>\n<div class=\"class\">height: 100vh;<\/div>\n<div class=\"class\">display: flex;<\/div>\n<div class=\"class\">justify-content: center;<\/div>\n<div class=\"class\">align-items: center;<\/div>\n<div class=\"class\">font-family: &#8216;Lato&#8217;, sans-serif;<\/div>\n<div class=\"class\">background-color: #fcfcfc;<\/div>\n<div class=\"class\">flex-direction: column;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">form {<\/div>\n<div class=\"class\">padding: 20px 40px;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:<\/span>&nbsp;Add input boxes and labels<\/h3>\n<p style=\"text-align: left;\">I created the input boxes using the following HTML and CSS codes. One level at a time has been used in these input boxes.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;form-group&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;input type=&#8221;text&#8221; required\/&gt;&lt;label&gt;Username&lt;\/label&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&lt;div class=&#8221;form-group&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;input type=&#8221;password&#8221; required\/&gt;&lt;label&gt;Password&lt;\/label&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<p style=\"text-align: left;\">\nI designed the input spaces using the following CSS codes. The width of the input space here is 300px and there is no border around the space.&nbsp;<\/p>\n<p style=\"text-align: left;\">Instead of a border around, only a 1-pixel border has been used at the bottom.<\/p>\n<div class=\"class\">\n<div class=\"class\">.form-group {<\/div>\n<div class=\"class\">position: relative;<\/div>\n<div class=\"class\">padding: 20px 0;<\/div>\n<div class=\"class\">width: 300px;<\/div>\n<div class=\"class\">max-width: 100%;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.form-group input {<\/div>\n<div class=\"class\">background-color: transparent;<\/div>\n<div class=\"class\">border: none;<\/div>\n<div class=\"class\">border-bottom: 1px solid #9e9e9e;<\/div>\n<div class=\"class\">color: #333;<\/div>\n<div class=\"class\">font-size: 16px;<\/div>\n<div class=\"class\">padding: 10px 0;<\/div>\n<div class=\"class\">display: block;<\/div>\n<div class=\"class\">width: 100%;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgNNn0Zx_eKqnWnDnRT6Vp8ikstEYKbeHAWnwnpoLa3lTJG501_yxnKqAZhGUOcYJm0VC4Y64MEWZqi24l5f_uORlsZnyMkXAZgQyFOZpawzEwurB-LHQsrzS6BHQSUcTB9p2vYoOviEwEpBxdUoxZm8RJqLF6o4SrAQ75MZY7UfRKNntdx6zoKn5QG7w\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add input boxes and labels\" border=\"0\" data-original-height=\"447\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgNNn0Zx_eKqnWnDnRT6Vp8ikstEYKbeHAWnwnpoLa3lTJG501_yxnKqAZhGUOcYJm0VC4Y64MEWZqi24l5f_uORlsZnyMkXAZgQyFOZpawzEwurB-LHQsrzS6BHQSUcTB9p2vYoOviEwEpBxdUoxZm8RJqLF6o4SrAQ75MZY7UfRKNntdx6zoKn5QG7w=s16000\" title=\"Add input boxes and labels\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:&nbsp;<\/span>Design the labels<\/h3>\n<p style=\"text-align: left;\">\nThese <b>CSS Floating Labels<\/b> have been designed using the following CSS. Here <span style=\"color: #2b00fe;\">font-size: 16px<\/span> is used to increase the size of the Floating Label.&nbsp;<\/p>\n<p style=\"text-align: left;\"><u>Transform: translateY (30px)<\/u> is used to keep the labels slightly down. As a result, the labels will be down 30px.<\/p>\n<div class=\"class\">\n<div class=\"class\">.form-group label {<\/div>\n<div class=\"class\">color: #9e9e9e;<\/div>\n<div class=\"class\">font-size: 16px;<\/div>\n<div class=\"class\">font-weight: 100;<\/div>\n<div class=\"class\">position: absolute;<\/div>\n<div class=\"class\">pointer-events: none;<\/div>\n<div class=\"class\">top: 0;<\/div>\n<div class=\"class\">transform: translateY(30px);<\/div>\n<div class=\"class\">transition: all 0.2s ease-in-out;<\/div>\n<div class=\"class\">left: 0px;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjlxeaSawUW6B4lKv3qmKR4r0SKvZiGYbZptWKAmAKnez5gOiNiXi4gW0HrEZtrcsONzraVXTNm1OetBpkoZCiwpMqB9i7v3i4B7inOs3efDOkDybGZp9c68R56Mx-ailP9xO0eRNNgsCtp6VuEz4aPYehhE3H9Qqv7DCftRWrHKphFFb-SmZ1SQhPpPA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Design the labels\" border=\"0\" data-original-height=\"447\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjlxeaSawUW6B4lKv3qmKR4r0SKvZiGYbZptWKAmAKnez5gOiNiXi4gW0HrEZtrcsONzraVXTNm1OetBpkoZCiwpMqB9i7v3i4B7inOs3efDOkDybGZp9c68R56Mx-ailP9xO0eRNNgsCtp6VuEz4aPYehhE3H9Qqv7DCftRWrHKphFFb-SmZ1SQhPpPA=s16000\" title=\"Design the labels\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 4:<\/span>&nbsp;Floating Label has been activated<\/h3>\n<p style=\"text-align: left;\">\nThis <b>login Form with Floating Label<\/b> has been implemented using the following CSS. These labels will move up when you <span style=\"color: #2b00fe;\">click on the input box<\/span>. Under normal circumstances, the transform is used to keep the labels down.&nbsp;<\/p>\n<p style=\"text-align: left;\">Labels are placed below 30px using transform. The instructions here are that when you click on the input box, the value of that transform will <u>become zero<\/u>. As a result, those levels will go up again.<\/p>\n<div class=\"class\">\n<div class=\"class\">.form-group input:valid,<\/div>\n<div class=\"class\">.form-group input:focus {<\/div>\n<div class=\"class\">border-bottom-color: #ee6e73;<\/div>\n<div class=\"class\">outline: none;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.form-group input:valid + label,<\/div>\n<div class=\"class\">.form-group input:focus + label {<\/div>\n<div class=\"class\">color: #ee6e73;<\/div>\n<div class=\"class\">font-size: 14px;<\/div>\n<div class=\"class\">transform: translateY(0);<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjwcAuaghJz81mj3cyklinTMf5BUCBOFS-DeioNFKAoB-IELwT8Ed__5PKm4V17AX3HPKb92aj3zu94_aIf0Dh8u1nCtYkdbvsBHb3Du3zLIrNUnkatG-qUCes2lyGAPLGBKSlxIc4IgPO23larsQqYG4r0E0GHGp9-V_GWjfoWwioZFcSC7q3rs6o_Yw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Floating Label has been activated\" border=\"0\" data-original-height=\"447\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjwcAuaghJz81mj3cyklinTMf5BUCBOFS-DeioNFKAoB-IELwT8Ed__5PKm4V17AX3HPKb92aj3zu94_aIf0Dh8u1nCtYkdbvsBHb3Du3zLIrNUnkatG-qUCes2lyGAPLGBKSlxIc4IgPO23larsQqYG4r0E0GHGp9-V_GWjfoWwioZFcSC7q3rs6o_Yw=s16000\" title=\"Floating Label has been activated\"><\/a><\/p>\n<h3 style=\"font-size: 26px; text-align: left;\">Step 5:&nbsp;Create a login button<\/h3>\n<p style=\"text-align: left;\">The buttons were created using the following HTML and CSS codes. The background color of the button is red and it is accompanied by a <span style=\"color: #2b00fe;\">border of 2 pixels<\/span>.<\/p>\n<div class=\"class\">&lt;input type=&#8221;button&#8221; value=&#8221;Submit&#8221; \/&gt;<\/div>\n<div class=\"separator\" style=\"clear: both;\"><\/div>\n<div class=\"class\">\n<div class=\"class\">input[type=&#8221;button&#8221;] {<\/div>\n<div class=\"class\">background-color: #ee6e73;<\/div>\n<div class=\"class\">border: 2px solid #ee6e73;<\/div>\n<div class=\"class\">border-radius: 2px;<\/div>\n<div class=\"class\">box-sizing: border-box;<\/div>\n<div class=\"class\">color: #fff;<\/div>\n<div class=\"class\">cursor: pointer;<\/div>\n<div class=\"class\">font-size: 16px;<\/div>\n<div class=\"class\">padding: 15px 0;<\/div>\n<div class=\"class\">margin-top: 15px;<\/div>\n<div class=\"class\">width: 100%;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjGv2ntvT4sszCq279X-VERCURJzjjCUUgQIQs1lPEca69SNc8de-NUmwqdYEAHD-i5onsAAkkcg-VlBzC2TgygQkneBM_jG02Ju5MLJb3v3yWzLF_USZ9bAtzJvgtmUWuJpGd4XR4YEyLWaHARh4DySSpg0mbrtTGjmIyPIvOh3C-Fu0l3coOaKvbFoA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create a login button\" border=\"0\" data-original-height=\"447\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjGv2ntvT4sszCq279X-VERCURJzjjCUUgQIQs1lPEca69SNc8de-NUmwqdYEAHD-i5onsAAkkcg-VlBzC2TgygQkneBM_jG02Ju5MLJb3v3yWzLF_USZ9bAtzJvgtmUWuJpGd4XR4YEyLWaHARh4DySSpg0mbrtTGjmIyPIvOh3C-Fu0l3coOaKvbFoA=s16000\" title=\"Create a login button\"><\/a><\/div>\n<p style=\"text-align: left;\">\nDifferent types of hover and color effects have been added to the login button using the following CSS. The background color of the buttons will change when the mouse is moved or clicked on the buttons.<\/p>\n<div class=\"class\">\n<div class=\"class\">input[type=&#8221;button&#8221;]:hover {<\/div>\n<div class=\"class\">background-color: #084ccd;<\/div>\n<div class=\"class\">border: 2px solid #084ccd;<\/div>\n<div class=\"class\">&nbsp;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">input[type=&#8221;button&#8221;]:active {<\/div>\n<div class=\"class\">border-color: #fff;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">input[type=&#8221;button&#8221;]:focus {<\/div>\n<div class=\"class\">outline: none;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhXbK3PvndWqF08JC4-M8vj6ThgqfgnZWr61I6F2AOBcze3Xsb4BJgMBSrF92jBYIUJ-Fh1vCfmZm5brsecSeR-CgtQcsdtT2xZZ2P9vsQHxxLfoYIq8gKbv0IR17l-_sNWRlw-OgDyHQowO9RhPMLhxj5W4aDioJ7lHPw3l_abJHsJ0loDzp2uvD0-uA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Login Form with Floating Label using HTML\" border=\"0\" data-original-height=\"447\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhXbK3PvndWqF08JC4-M8vj6ThgqfgnZWr61I6F2AOBcze3Xsb4BJgMBSrF92jBYIUJ-Fh1vCfmZm5brsecSeR-CgtQcsdtT2xZZ2P9vsQHxxLfoYIq8gKbv0IR17l-_sNWRlw-OgDyHQowO9RhPMLhxj5W4aDioJ7lHPw3l_abJHsJ0loDzp2uvD0-uA=s16000\" title=\"Login Form with Floating Label using HTML\"><\/a><\/div>\n<p style=\"text-align: left;\">Hopefully from the above tutorial, you have learned how I <a href=\"https:\/\/foolishdeveloper.com\/2021\/06\/glassmorphism-login-form-html-css.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">created this Login Form<\/span><\/a> Card With a <b>Floating label using HTML and CSS<\/b>.<\/p>\n<p style=\"text-align: left;\">Earlier I shared with you many more types of <b>label animation tutorials<\/b>. If you like this article, you can follow those tutorials. You can use the download button below to download the required source code of this Login Form with Floating Label.<\/p>\n<p><script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button class=\"last-btn\" id=\"btnx\" onclick=\"generate()\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=1pCR-ny5khypADWyrkemmMn6pnhWBZwOb\" id=\"downloadx\" style=\"display: none;\" target=\"_blank\" rel=\"noopener\"><i aria-hidden=\"true\" class=\"fa fa-cloud-download fa-fw\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to create a Login Form with Floating Label using HTML and CSS. Earlier I shared with you the design of different types of login forms. However, Floating Label animation has been added to this login form. I used HTML and CSS to create this project (Login Form with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":917,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,159,14,59,25],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-floating_label","category-html","category-html_login_form","category-login_form","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":1,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/124\/revisions\/918"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}