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
