निःशुल्क सरल HTML लॉगिन फ़ॉर्म

अनुशंसित

28 August 2025

मैट्रिक्स लॉगिन रजिस्टर फॉर्म HTML CSS

10 August 2024

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
html {
    height: 100%;
    font-family: Montserrat;
  }
  
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  .login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }

निःशुल्क सरल HTML लॉगिन फ़ॉर्म

अनुशंसित

मैट्रिक्स लॉगिन रजिस्टर फॉर्म HTML CSS

HTML लॉगिन फॉर्म कोड

हैकर लॉगिन

HTML

CSS

JS

अनुशंसित

मैट्रिक्स लॉगिन रजिस्टर फॉर्म HTML CSS

HTML लॉगिन फॉर्म कोड

हैकर लॉगिन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS