लिक्विड ड्रॉप लॉगिन पेज HTML टेम्पलेट

1568 alejandrokundrah

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

22 January 2026

सतत जीवन और प्रकृति विश्राम के लिए HTML टेम्पलेट

28 July 2025

SVG डिज़ाइन के साथ HTML संदेश बबल

13 November 2025

रेट्रो फुटबॉल गेम: HTML5 कैनवास, कैमरा फॉलो

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Drop Login Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="style.css">
</head>

</div>
        </div>

<a href="#" class="btn">Forget Password</a>
        <a href="#" class="btn signup">Signup</a>
    </div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}

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

.container {
    position: relative;
    left: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .drop {
    position: relative;
    width: 350px;
    height: 350px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 62% 38% 24% 76% / 59% 60% 40% 41%;
}

.container .drop:hover {
    border-radius: 50%;
}

.container .drop::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}

.container .drop::after{
    content: '';
    position: absolute;
    top: 85px;
    left: 110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}

.container .drop .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;
}

.container .drop .content h2 {
    position: relative;
    color: #f80404;
    font-size: 1.5em;
}

.container .drop .content form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.container .drop .content form .input {
    position: relative;
    width: 225px;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    border-radius: 25px;
}

.container .drop .content form .input::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px 15px;
}

.container .drop .content form .input input{
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
}

.container .drop .content form .input input[type="submit"] {
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.container .drop .content form .input:last-child{
    width: 120px;
    background: #3a86ff;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    transition: 0.5s;
}

.container .drop .content form .input:last-child:hover {
    width: 150px;
}

.btn {
    position: absolute;
    right: -120px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: #00b4d8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 2.2em;
    letter-spacing: 0.01em;
    font-size: 0.8em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(0, 180, 216, 0.05),
    15px 25px 10px rgba(0, 180, 216, 0.1),
    15px 20px 20px rgba(0, 180, 216, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
    border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}

.btn::before{
    content: '';
    position: absolute;
    top: 15px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
}

.btn.signup {
    bottom: 150px;
    right: -140px;
    width: 80px;
    height: 80px;
    border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
    background: #f77f01;
    box-shadow: inset 10px 10px 10px rgba(247, 127, 0, 0.05),
    15px 25px 10px rgba(247, 127, 0, 0.1),
    15px 20px 20px rgba(247, 127, 0, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}

.btn.signup::before{
    left: 20px;
    width: 15px;
    height: 15px;
}

.btn:hover {
    border-radius: 50%;
}

अनुशंसित

सतत जीवन और प्रकृति विश्राम के लिए HTML टेम्पलेट

SVG डिज़ाइन के साथ HTML संदेश बबल

रेट्रो फुटबॉल गेम: HTML5 कैनवास, कैमरा फॉलो

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS