Modèle HTML de page de connexion Liquid Drop

1,746 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de page de connexion Liquid Drop

Recommandé

31 July 2025

Exemple de bouton néon HTML

8 September 2024

Hacker de connexion

1 March 2026

Modèle de jeu de tir 3D

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%;
}