Trang chủLập trình WebHTML & CSSTạo form đăng nhập đẹp với HTML và CSS

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.

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

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
0 0 Phiếu bình chọn
Xếp hạng bài viết
BÀI VIẾT LIÊN QUAN
Đăng ký nhận thông báo
Thông báo email khi
guest
0 Bình luận
Không thể gửi email
Phản hồi nội tuyến

NÊN ĐỌC THÊM

Bạn muốn tìm kiếm gì?


0
Giáo sư! có thể ném gạch bên dưới nhé!x
()
x