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é.

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


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