Login

2,428 logicalbug531

Open In Editor Publish Your Code

Login

Recommended

17 May 2024

Animated home and registration login form

22 January 2025

login password simple

12 December 2025

Culinary Management Login & Signup Form

HTML

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
<style>
*{
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       font-family: "Poppins", sans-serif;
}

body{
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #191825;
}

.input-field{
       position: relative;
}

.input-field input{
       width: 350px;
       height: 60px;
       border-radius: 6px;
       font-size: 18px;
       padding: 0 15px;
       border: 2px solid #fff;
       background: transparent;
       outline: none;
       color: #fff;
}

.input-field label{
       position: absolute;
       top: 50%;
       left: 15px;
       transform: translateY(-50%);
       color: #fff;
       font-size: 19px;
       pointer-events: none;
       transition: .3s;
}

input:focus{
       border: 2px solid #1cd679;
}

input:focus ~ label,
input:valid ~ label{
       top: 0;
       font-size: 16px;
       padding: 0 10px;
       background: #191825;
}
 </body>
</html>

JS