Cara Membuat Login System (Basic) HTML Dan CSS

cara membuat login system - hallo teman-teman saya akan membuka kategori baru yaitu membagikan script yang bermanfaat untuk anda. script nya lebih banyak HTML dan CSS. jadi gunakan lah untuk project-project anda.

Cara Membuat Login System

 <form name="formContainer" id="formContainer">
        <div name="formGroup" id="formGroup">
            <label id="lab" for="username">Username</label>
            <input type="text" name="username" id="username" required/>
        </div>
        <div name="formGroup" id="formGroup">
            <label id="lab" for="password">Password</label>
            <input type="password" name="password" id="password" required/>
        </div>
        <button type="submit" id="send" name="send">SEND</button>
        <div id="warning"></div>
    </form>

body {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-family: Verdana
}
#formContainer{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
#formGroup {
    display: block;
    width: 400px;
    border-radius: 9px;
    border: 2px solid rgba(0, 195, 208, 0.90);
    margin: 5px;
    overflow: hidden
}
#username, #password{
    width:250px;
    padding:5px;
    outline:none;
    border:none;
    font-size:20px;
}
#lab{
    display:inline-block;
    width:100px;
    background:rgba(0, 195, 208, 0.90);
    color:#262626;
    padding:10px;
}
#send {
    width: 405px;
    height: 35px;
    margin-left: 3px;
    border-radius: 7px;
    border: 2px solid rgba(0, 195, 208, 0.90);;
    background: rgba(0, 195, 208, 0.90);
    transition:.5s;
    font-weight:bold;
}
#send:hover{
    background:#00918f;
    color:#fff;
}

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :