Chia sẻ code tạo form đăng nhập đẹp mắt với CSS

Điểm 4.6/5 dựa vào 87 đánh giá

Bài viết xin chia sẻ đoạn code ngắn để giúp bạn có thể tùy chỉnh form đăng nhập của mình trông đẹp mắt hơn. Dưới đây chỉ là đoạn code ngắn và đơn giản, tùy chỉnh các thuộc tính dành cho Form, bạn có thể áp dụng cho các dạng form khác nhau chứ không riêng đối với form đăng nhập. Ở đây mình chỉ hướng dẫn tùy chỉnh form cho đẹp mắt òn tính năng form tùy từng mục đích mà bạn sử dụng khác nhau nhé.

Bạn xem demo ngay bên dưới

Bạn copy và dán code CSS bên dưới vào ngay trước thẻ đóng </head>

<style>
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
background: #3C3835;
height: 40px;
transition: background 0.3s ease-in-out;
}
input:focus {
background: #4B4643;
outline: none;
}
p {
line-height: 1.5em;
}
after {
clear: both;
}
#login form {
padding: 22px 22px 22px 22px;
margin: 50px auto;
width: 268px;
border-radius: 8px;
background: #302D2A;
border: 3px solid #443F3B;
}
#login form input[type="text"] {
border-radius:4px;
color: #a9a9a9;
margin-bottom: 1em;
padding: 0 16px;
width: 235px;
}
#login form input[type="password"] {
border-radius:4px;
color: #a9a9a9;
margin-bottom: 1em;
padding: 0 16px;
width: 235px;
}
#login form input[type="submit"] {
background:#50A500;
border: 0;
width: 100%;
height: 40px;
border-radius: 4px;
color: white;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
#login form input[type="submit"]:hover {
background: #A59E00;
}</style>

Bây giờ bạn chỉ cần cho code form HTML bên dưới vào nơi bạn muốn trên website hay blogspot là xong

<div id="login">
<form name='form-login'>

<input type="text" id="user" placeholder="Tên đăng nhập">

<input type="password" id"pass" placeholder="Mật khẩu">

<input type="submit" value="Đăng nhập">

</form></div>

Chúc bạn thành công!

Chuyên mục: Blogspot nâng cao Blogspot tips