Tạo form đăng nhập đẹp với HTML và CSS

Trong bài viết này chúng ta sẽ cùng đi tạo form đăng nhập đẹp trên HTML và CSS.

Tạo form đăng nhập đẹp với HTML và CSS

Trước tiên chúng ta sẽ tạo bộ khung đăng nhập HTML gồm các trường nhập dữ liệu và nút đăng nhập.

<form method="post" action="#" class="box">
        <H1>ĐĂNG NHẬP TÀI KHOẢN</H1>
        <input type="text" placeholder="Email">
        <input type="password" placeholder="Password">
        <input type="submit" value="ĐĂNG NHẬP">
 </form>

Và đặt CSS Style như sau

html, body{
    width: 100%;
}
.box{
    text-align: center;
    background: #181818;
    width: 400px;
    height: auto;
    padding: 25px;
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 0px 20px 0px #000;
}
.box h1{
    color: #fff;
}
.box input[type="password"], .box input[type="text"]{
    background: none;
    outline: none;
    width: 210px;
    height: 40px;
    border-radius: 40px;
    padding: 0px 15px;
    margin: 15px 0px;
    border: solid 2px #002cff;
    transition: 1s;
}
.box input[type="password"]:focus, .box input[type="text"]:focus{
    width: 320px;
    border-color: chartreuse;
    transition: 1s;
}
.box input[type="submit"]{
    background: none;
    outline: none;
    width: 160px;
    height: 40px;
    border-radius: 40px;
    margin: 15px 0px;
    border: solid 2px #002cff;
    color: #fff;
    font-size: 18px;
    transition: 1s;
}
.box input[type="submit"]:hover{
    background: #002cff;
    transition: 1s;
}

Như vậy với vài dòng HTML và một vài thuộc tính CSS cơ bản là chúng ta đã có được form đăng nhập rất đẹp như bên dưới ảnh.

Xem thêm video dưới đây

ĐỌC TIẾP
Cách căn phần tử ra giữa trung tâm trong HTML CSS
Thiết kế nút bấm yahoo bằng HTML&CSS
Tổng hợp các bộ chọn trong CSS thường dùng
Cách lấy mã màu CSS từ giao diện của website