लॉग इन करें

1098 logicalbug531

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

15 July 2025

HTML एनिमेटेड लॉगिन फ़ॉर्म उदाहरण

19 April 2024

HTML लॉगिन फॉर्म टेम्पलेट V2

28 March 2025

कोडपेन होम आउटलाइन मोबाइल कार्ड

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>

अनुशंसित

HTML एनिमेटेड लॉगिन फ़ॉर्म उदाहरण

HTML लॉगिन फॉर्म टेम्पलेट V2

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS