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
