Thiết kế nút bấm yahoo bằng HTML&CSS

Dưới đây là nút bấm bằng HTML và CSS, bạn hover chuột vào xem thử thế nào nhé.

DANH SÁCH BÀI VIẾT
Tạo form đăng nhập đẹp với HTML và CSS
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
Cách lấy mã màu CSS từ giao diện của website
Bảng mã màu các thương hiệu nổi tiếng sử dụng - Mã màu đẹp

Để thiết kế nút bấm này vô cùng đơn giản, chúng ta có HTML như sau:

<button class="btn_yahoo">Yahoo</button>

Và CSS style cho nó

.btn_yahoo{
     
	background: #640f6c;
	color: #fff;
	font-size: 20px;
	padding: 5px 30px 5px 30px;
	border-radius: 30px;
	font-weight: 700;
	transition: 1s;
}
.btn_yahoo:hover{
	background: #fafafa;
	color: #640f6c;
	transition: 1s;
}

Lớp btn_yahoo sẽ có 1 số thuộc tính như sau:

background: #640f6c; đặt màu nền với mã màu là 640f6c

color: #fff; Đặt văn bản là màu trắng

padding: 5px 30px 5px 30px; là khoảng cách không gian từ bên trong thẻ div

border-radius: 30px; Bo góc với kích thước là 30px

font-weight: 700; Độ đậm văn bản

Bộ chọn :hover sử dụng để đặt thuộc tính cho thành phần khi ta di chuột vào thành phân đó.

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