Tiếng Anh 
Phát triển
Phát hành 02-12-2023
Trong việc thiết kế giao diện web, các button đóng vai trò quan trọng trong việc tạo ra trải nghiệm người dùng tốt. Bằng cách sử dụng CSS, chúng ta có thể tạo ra những button đẹp mắt và có hiệu ứng sinh động, từ những button cơ bản đến những button nổi bật và độc đáo. Trong bài viết này, hãy cùng khám phá cách tạo style và hiệu ứng cho button bằng CSS.
1. Khái niệm về Button trong CSS?
Button trong CSS là một cụm từ được sử dụng để ám chỉ việc tạo ra và tùy chỉnh các phần tử button trên trang web bằng cách sử dụng Cascading Style Sheets (CSS). Trong ngữ cảnh của thiết kế web, button không chỉ đơn giản là một phần tử HTML <button> mà còn bao gồm các phần tử khác như <a> được thiết lập để có hành vi nhấn nút, hoặc thậm chí các phần tử khác như div được định dạng để trông giống như một button.
Khi chúng ta nói về "Button trong CSS", chúng ta thường đề cập đến quá trình tạo ra, trang trí và tùy chỉnh các button trên trang web để phù hợp với mục đích thiết kế cụ thể. Điều này thường bao gồm việc sử dụng các thuộc tính và giá trị CSS như background-color để thiết lập màu nền, border để thiết lập viền, padding để điều chỉnh khoảng cách bên trong của button, color để thiết lập màu chữ, font để tùy chỉnh font chữ, box-shadow để tạo hiệu ứng bóng đổ, và nhiều thuộc tính khác.
Việc tạo ra button hấp dẫn và chức năng trong CSS không chỉ là về việc định rõ các thuộc tính và giá trị, mà còn là về sự sáng tạo trong việc kết hợp chúng để tạo ra hiệu ứng và phong cách riêng biệt. Qua việc sử dụng CSS, chúng ta có thể tạo ra những button từ những cái cơ bản đến những cái đặc biệt với hiệu ứng hover, click và các hiệu ứng đặc biệt khác để tăng trải nghiệm người dùng và làm cho giao diện trở nên thú vị hơn.
Chúng ta cùng xem qua một ví dụ đơn giản dưới đây để hiểu rõ hơn về Button trong CSS:
<button class="primary-button">Click me!</button>
<a href="#" class="primary-button">Click me!</a>
.primary-button {
background-color: #007bff;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.primary-button:hover {
background-color: #0056b3;
}
.primary-button:active {
background-color: #004080;
box-shadow: 0 3px #666;
transform: translateY(2px);
}
Ngay sau đây chúng ta sẽ cùng nhau tìm hiểu kỹ hơn về cách đề định dạng kiểu dáng cho button trong CSS
>>>>> Xem thêm bài viết tương tự:
- Less CSS là gì? Cú pháp của LESS
- Global attribute trong HTML là gì? Tìm hiểu về các biến toàn cục trong HTML
- Các kỹ thuật xây dựng layout cho một website
- Semantic tags và một số semantic tags trong HTML5
- XHTML là gì? Sự khác nhau giữa XHTML và HTML
2. Kiểu dáng cơ bản của Button trong CSS
Chúng ta có thể bắt đầu bằng việc tạo ra các nút kiểu dáng cơ bản bằng cách sử dụng CSS để định dạng các phần tử button.
.button {
background-color: #FF4954;
border: none;
color: #FFFFFF;
padding: 0.375rem 0.66rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
}
<p class="button">Click me!</p>3. Thay đổi màu sắc Button trong CSS
Với thuộc tính background-color chúng ta có thể dễ dàng thay đổi màu sắc của button thành màu chúng ta muốn như sau:
.button-blue {
background-color: blue;
}
.button-red {
background-color: blue;
}
.button-grey {
background-color: blue;
}4. Thay đổi kích thước của Button trong CSS
Khi nói về kích thước của Button chúng ta sẽ có font-size hoặc padding tương ứng với thay đổi font chữ hoặc thay đổi khoảng cách viền của button. Chúng ta cũng xem hưỡng dẫn sau:
Ví dụ, thay đổi font-size button:
.button-1rem {
font-size: 1rem;
}
.button-2rem {
font-size: 2rem;
}
.button-3rem {
font-size: 3rem;
}Ví dụ, thay đổi kích thước button với thuộc tính padding:
.button-1 {
padding: 0.375rem 0.66rem;
}
.button-2 {
padding: 1rem 1rem;
}
.button-3 {
padding: 1.5rem 3rem;
}5. Bo tròn Button trong CSS
Thuộc tính boder-radius được sử dụng để có thể bo tròn các phần tử trong html tương tự với button chúng ta cũng có thể sử dụng thuộc tính này để thực hiện bo góc như sau:
.button-1 {
border-radius: 0;
}
.button-2 {
border-radius: .5rem;
}
.button-pill {
border-radius: 50rem;
}6. Thay đổi hiệu ứng khi di chuột qua Button trong CSS
Chúng ta cũng có thể thêm hiệu ứng khi di chuột qua nút bằng cách sử dụng pseudo-class :hover.
.button:hover {
background-color: #f70d1b; /* Màu nền khi di chuột qua */
color: #FFFFFF; /* Màu chữ khi di chuột qua */
}7. Đổ bóng cho Button trong CSS
Sử dụng thuộc tính box-shadow để thêm hiệu ứng bóng cho các nút, làm cho chúng trở nên động hơn và nổi bật hơn trên trang web.
.button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng mờ */
}8. Button group trong CSS
Đối với nhóm các button, bạn có thể xếp chúng cạnh nhau hoặc dọc theo một hàng ngang, tạo ra một giao diện hấp dẫn và dễ sử dụng.
.button-group {
display: flex; /* Hiển thị các nút theo chiều ngang */
}
.button {
margin-right: 10px; /* Khoảng cách giữa các nút */
}.button-group {
display: flex;
flex-flow: column; /* Hiển thị các nút theo chiều dọc */
}
.button {
margin-top: 10px; /* Khoảng cách giữa các nút */
}9. Hiển thị Button trên hình ảnh trong CSS
Đặt nút lên trên hình ảnh để tạo điểm nhấn hoặc kích thích hành động từ người dùng.
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
<button class="button">Click Me</button>
</div>
.image-container {
position: relative; /* Định vị tương đối */
}
.button {
position: absolute; /* Đặt vị trí tuyệt đối */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Canh chỉnh nút chính giữa hình ảnh */
}
10. Vô hiệu hóa Button trong CSS
Trong khi hiển thị trang web, sẽ có những thời điểm chúng ta không muốn người dùng thao tác với các nút không được phép. Chúng ta có thể thực hiện việc này bằng cách thêm hiệu ứng độ mờ và không cho phép tương tác cho các nút bằng cách sử dụng thuộc tính opacity và pointer-events.
.disabled {
opacity: 0.5; /* Độ mờ */
pointer-events: none; /* Không cho phép tương tác */
}11. Hiệu ứng Ripple với Button trong CSS
Chúng ta có thể thêm hiệu ứng "ripple" cho các nút để tạo ra một phản ứng tương tự như sóng nước khi người dùng nhấp chuột.
.button {
overflow: hidden; /* Ẩn phần nền vượt ra khỏi nút */
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: all 0.5s;
transform: translate(-50%, -50%);
opacity: 0;
}
.button:hover::after {
width: 0;
height: 0;
opacity: 1;
}Tổng kết
Trong bài blog này, chúng ta đã tìm hiểu cách tạo và tùy chỉnh các nút trong CSS. Chúng ta đã khám phá các phong cách cơ bản như thay đổi màu sắc, định dạng kích thước, bo tròn góc, và thêm hiệu ứng khi di chuột qua và nhấp chuột vào nút. Bằng cách áp dụng những kỹ thuật này, bạn có thể tạo ra các nút độc đáo và tùy chỉnh cho trang web của mình, tăng cường trải nghiệm người dùng và làm cho giao diện trở nên thú vị và dễ sử dụng hơn.
Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.
Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…
Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:
Chia sẻ bài viết
