Chủ Nhật, 13 Tháng Mười 2024
Trang chủLập trình WebHTML & CSSThiết kế nút bấm yahoo bằng HTML&CSS

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

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ì?

Dịch vụ code thuê

TUICOCACH.COM NHẬN ĐẶT TEXTLINK, BANNER, GP
0
Giáo sư! có thể ném gạch bên dưới nhé!x