Khi thiết kế một trang web, bạn thường có một nút muốn nhìn theo một cách nhất định. Ví dụ:bạn có thể muốn một nút có màu nền khác với các phần tử trang khác để thu hút sự chú ý của người dùng vào nút.
Sử dụng CSS, các nhà phát triển có thể tạo các nút theo kiểu. CSS cho phép bạn thay đổi màu sắc, kích thước văn bản, đường viền, chiều rộng và chiều cao của nút, trong số những thứ khác.
Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng một số thuộc tính CSS để tạo kiểu cho một nút HTML. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia tạo kiểu các nút bằng CSS.
Tổng quan về các nút
Bạn có thể xác định một nút theo một số cách khác nhau trong HTML. Hai cách tiếp cận phổ biến nhất là <button> hoặc một <input type=“button”> yếu tố. Các cách tiếp cận này trả về cùng một loại nút.
Mã HTML được sử dụng để xác định một nút. Đây là giao diện của một nút HTML mà không có bất kỳ kiểu dáng nào:
Mã chúng tôi sử dụng cho nút này là:
<button>Click me</button>
Nút này sử dụng các kiểu HTML mặc định, có nghĩa là hiện tại nút này trông khá đơn giản.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Nếu chúng ta muốn tạo kiểu cho nút của mình — nói cách khác, để tùy chỉnh giao diện của nó trên trang — chúng ta cần sử dụng CSS. Trong bài viết này, chúng tôi sẽ thảo luận về cách thực hiện những điều sau với một nút:
- Thay đổi màu nền.
- Thay đổi màu văn bản.
- Thay đổi kích thước văn bản.
- Thêm phần đệm.
- Làm tròn các góc.
- Thêm đường viền màu.
- Sử dụng tính năng:hover.
- Thêm bóng.
- Thay đổi chiều rộng.
- Tắt nó.
- Tạo hiệu ứng cho nó.
Chúng ta cũng sẽ thảo luận về cách tạo các nhóm nút ngang và dọc.
Màu nền
Khi bạn đang thiết kế một nút, một trong những điều đầu tiên bạn có thể muốn làm là đặt màu nền cho nút. Theo mặc định, một nút có nền trắng và văn bản màu đen. Sử dụng thuộc tính màu nền CSS, chúng tôi có thể thay đổi màu nền của nút.
Giả sử chúng ta đang thiết kế một nút cho một trang web và muốn nút có nền màu hồng. Chúng tôi có thể thay đổi màu của nút bằng cách sử dụng mã CSS sau:
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
background-color: pink;
}
Mã của chúng tôi trả về:
Sử dụng thuộc tính background-color, chúng tôi đã thay đổi màu nền của nút thành màu hồng. Chúng ta có thể thay đổi màu nền của nút thành bất kỳ màu nào bằng cách sử dụng thuộc tính này.
Màu văn bản
Để thay đổi màu văn bản của nút, bạn có thể sử dụng thuộc tính màu. Giả sử chúng ta đang thiết kế một nút và chúng ta muốn nút có nền màu hồng và văn bản màu xanh lá cây. Chúng tôi có thể tạo nút này bằng mã sau:
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
color: green;
background-color: pink;
}
Mã của chúng tôi trả về:
Trong mã của chúng tôi, chúng tôi sử dụng màu:xanh lá cây; thuộc tính để đặt màu của văn bản trong nút của chúng tôi thành màu xanh lục.
Kích thước văn bản
Bạn có thể sử dụng thuộc tính kích thước phông chữ CSS để xác định độ lớn của văn bản bên trong một nút. Giả sử chúng ta muốn văn bản có kích thước phông chữ là 20px. Chúng tôi có thể thực hiện điều này bằng cách sử dụng mã sau:
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
background-color: blue;
color: white;
font-size: 20px;
}
Mã của chúng tôi trả về:
Nút của chúng ta có cùng kích thước như trước đây, nhưng bây giờ kích thước của phông chữ bên trong nó là 20px. Chúng tôi đã sử dụng thuộc tính font-size để đặt kích thước của văn bản trong nút của chúng tôi.
Lớp đệm
Khi thiết kế một nút, bạn có thể quyết định muốn có một khoảng cách nhất định giữa văn bản bên trong nút và các bức tường bên ngoài của nút. Đó là lúc thuộc tính padding xuất hiện.
Thuộc tính padding sử dụng các chỉ báo độ dài (px, em, v.v.) hoặc giá trị phần trăm để xác định một lượng không gian nhất định giữa văn bản của nút và đường viền của nó.
Giả sử chúng ta muốn tạo hai nút trên trang của mình. Một nút phải có đệm 40px và nút kia phải có đệm 20px. Chúng tôi có thể tạo các nút này bằng mã sau:
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
styles.css
.button1 {
padding: 20px;
font-size: 16px;
background-color: blue;
color: white;
}
.button2 {
padding: 40px;
font-size: 16px;
background-color: blue;
color: white;
}
Mã của chúng tôi trả về:
Nút đầu tiên của chúng tôi có ranh giới 20px giữa văn bản bên trong nút và đường viền của nút. Nút thứ hai của chúng tôi có ranh giới 40px giữa văn bản và đường viền của nút. Đối với các nút này, để đảm bảo có đủ không gian cho phần đệm này, chúng tôi không chỉ định thuộc tính chiều rộng hoặc chiều cao. (Chúng tôi sẽ thảo luận về các thuộc tính này bên dưới.)
Góc tròn
Theo mặc định, các nút trong HTML có các cạnh hình vuông. Tuy nhiên, bạn có thể quyết định muốn các nút của mình có các góc tròn.
Bạn có thể sử dụng thuộc tính bán kính đường viền để tạo các nút hình chữ nhật với các góc tròn. Dưới đây là ba ví dụ về mã sử dụng thuộc tính border-radius. Để minh họa ảnh hưởng của các kích thước bán kính khác nhau, mỗi ví dụ sử dụng bán kính đường viền có kích thước khác nhau.
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>
styles.css
.button1 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 5px;
}
.button2 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 10px;
}
.button3 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 15px;
}
Mã của chúng tôi trả về:
Trong ví dụ này, chúng tôi đã tạo ba nút. Bán kính đường viền của nút càng lớn thì các góc của nút càng tròn.
Màu đường viền
Bạn có thể thêm đường viền màu tùy chỉnh vào nút có thuộc tính đường viền CSS.
Giả sử bạn muốn tạo một nút có viền màu để người dùng thấy rõ các ranh giới của nút. Bạn có thể tạo một nút như vậy bằng mã sau:
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1; // Light pink
padding: 25px;
}
Mã của chúng tôi trả về:
Nút của chúng tôi có nền trắng, nội dung của nó màu đen và nó có phần đệm 25px trên tất cả các cạnh. Chúng tôi đã sử dụng thuộc tính border để tạo một đường viền liền khối rộng 3px xung quanh nút của chúng tôi và chúng tôi đặt màu viền của chúng tôi thành # ffb6c1, là giá trị thập lục phân cho màu hồng nhạt.
Nếu bạn đang muốn tìm hiểu thêm về thuộc tính đường viền, hãy đọc bài viết của chúng tôi về thuộc tính đường viền CSS.
Di chuột
Bạn có thể sử dụng công cụ chọn CSS:hover để điều hướng một trang web thay đổi kiểu của nút khi người dùng di chuột qua nút đó bằng con trỏ của họ.
Giả sử chúng ta đang thiết kế một nút có văn bản màu đen và nền trắng, và chúng ta muốn màu văn bản của nó chuyển thành màu trắng và màu nền của nó chuyển thành màu xanh lục khi người dùng di chuột qua nó. Chúng tôi có thể thực hiện nhiệm vụ này bằng cách sử dụng mã sau:
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
}
.button:hover {
background-color: green;
color: white;
}
Đây là kết quả của mã của chúng tôi:
Nút đầu tiên trong sơ đồ trên cho thấy cách nút của chúng tôi xuất hiện khi người dùng không di chuột qua nút. Như bạn có thể thấy, mã trả về một nút màu trắng với văn bản màu đen, đường viền màu hồng và phần đệm 25px. Đây là trạng thái mặc định của nút. Nhưng khi người dùng di chuột qua nút, màu nền của nút chuyển thành màu xanh lá cây và màu văn bản trong nút chuyển thành màu trắng.
Ngay sau khi con trỏ của người dùng di chuyển khỏi nút, nút sẽ trở lại trạng thái mặc định.
Ngoài ra, chúng ta có thể sử dụng thuộc tính thời lượng chuyển đổi để chỉ định thời gian cần thiết để nút thay đổi sau khi người dùng di chuột qua nút đó bằng con trỏ của họ. Vì vậy, nếu chúng ta muốn mất 1 giây để nút ở trên thay đổi (thành có nền màu xanh lá cây và văn bản màu trắng), chúng ta có thể sử dụng mã này:
.button {
…
transition-duration: 1s;
}
Bây giờ khi người dùng di chuột qua nút, sẽ mất một giây để nút thay đổi. Bạn có thể tìm hiểu thêm về chuyển đổi CSS trong hướng dẫn dành cho người mới bắt đầu của chúng tôi về chuyển đổi CSS.
Bóng đổ
Bạn có thể sử dụng thuộc tính CSS box-shadow để tạo bóng cho nút. Thuộc tính box-shadow có một số tham số. Bạn có thể tìm hiểu về các tham số này trong hướng dẫn CSS box-shadow của chúng tôi.
Giả sử chúng tôi đang thiết kế một nút và chúng tôi muốn nó có bóng đổ. Chúng tôi có thể tạo bóng này bằng cách sử dụng mã sau cho nút:
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}
Mã của chúng tôi trả về:
Trong ví dụ này, chúng tôi đã thêm một bóng đổ vào nút của chúng tôi. Các thông số chúng tôi đã chỉ định cho bóng của chúng tôi như sau:
- Độ lệch x là 0, có nghĩa là bóng của chúng ta xuất hiện ngay dưới nút của chúng ta.
- Độ lệch y là 10px, có nghĩa là bóng của chúng ta kéo dài bên dưới nút của chúng ta thêm 10px.
- Bán kính mờ là 10px, có nghĩa là bóng của chúng ta có hiệu ứng mờ.
- Bán kính lan rộng cho bóng của nút của chúng tôi là 0, do đó, không có sự lan rộng xung quanh phần mờ.
- Màu bóng của chúng ta là rgba (0,0,0,0.2), có màu xám nhạt.
Như bạn có thể thấy trong kết quả mã ở trên, nút của chúng tôi xuất hiện với tất cả các thuộc tính này.
Chiều rộng
Thuộc tính width có thể xác định chiều rộng của nút. Theo mặc định, kích thước của nút dựa trên nội dung văn bản của nó, nhưng bạn có thể sử dụng thuộc tính width để ghi đè mặc định và đặt chiều rộng cụ thể.
Dưới đây là ví dụ về ba nút có độ rộng khác nhau:
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>
styles.css
.button1 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 250px;
}
.button2 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 50%;
}
.button2 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 100%;
}
Mã của chúng tôi trả về:
Trong ví dụ của chúng tôi, chúng tôi đã tạo ba nút với chiều rộng khác nhau.
Tắt nút
Khi thiết kế một nút, bạn có thể quyết định tắt nó nhưng vẫn hiển thị nó trên trang. Ví dụ:bạn có thể muốn tắt một nút cho đến khi người dùng điền vào tất cả các trường trong biểu mẫu web.
Bằng cách sử dụng thuộc tính độ mờ và con trỏ, bạn có thể tạo một nút bị vô hiệu hóa. Thuộc tính opacity thêm tính trong suốt cho một nút. Điều này làm cho nó giống như bị vô hiệu hóa. Độ mờ mặc định là 1, hiển thị màu không trong suốt. Bạn có thể tìm hiểu thêm về thuộc tính độ mờ CSS trong hướng dẫn của chúng tôi về độ mờ CSS.
Thuộc tính con trỏ, khi được gán giá trị "không được phép", sẽ vô hiệu hóa nút. Khi người dùng di chuột qua một nút được gán giá trị này, con trỏ sẽ hiển thị một dấu hiệu dừng.
Đây là mã cho một nút bình thường trong HTML, theo sau là mã cho một nút bị vô hiệu hóa:
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
styles.css
.button1 {
background-color: #ffb6c1;
color: black;
padding: 25px;
}
.button2 {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: none;
opacity: 0.5;
cursor: not-allowed;
}
Mã của chúng tôi trả về:
Cả hai nút đều có #ffb6c1 màu hồng tầng lớp. Nền của nút đầu tiên hoàn toàn không trong suốt, đó là mặc định; nút này có chức năng (là mặc định). Nút thứ hai có thuộc tính opacity được đặt thành 0.5 và giá trị của thuộc tính con trỏ được đặt thành not-allowed . Điều này tạo ra một nút không chức năng (bị vô hiệu hóa) trong suốt hơn.
Tạo nhóm nút
Khi bạn đang phát triển một trang web, bạn có thể muốn tạo một nhóm các nút. Ví dụ:nếu bạn đang thiết kế một biểu mẫu, bạn có thể muốn có một nhóm nút với ba nút cho phép người dùng lưu biểu mẫu, quay lại hoặc chuyển đến trang tiếp theo của biểu mẫu.
Nhóm nút ngang
Nếu bạn muốn các nút xuất hiện cạnh nhau, bạn cần tạo một nhóm nút CSS. Bạn có thể tạo một nhóm nút bằng cách thả nổi các nút bạn muốn xuất hiện trong nhóm của mình ở bên trái. Bạn có thể tìm hiểu thêm về thuộc tính float của CSS trong hướng dẫn của chúng tôi về CSS float. Dưới đây là một ví dụ về mã cho nhóm nút ngang:
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: none;
float: left;
} Mã của chúng tôi trả về:
Như bạn có thể thấy, chúng tôi đã tạo ra ba nút. Chúng xuất hiện cạnh nhau.
Tương tự, chúng ta có thể chỉ định thuộc tính CSS đường viền để tạo một nhóm các nút mà mỗi nút có đường viền riêng. Đây là mã chúng tôi có thể sử dụng để tạo nhóm nút có đường viền:
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: 2px solid blue;
float: left;
} Mã của chúng tôi trả về:
Trong mã của chúng tôi, chúng tôi đã chỉ định một đường viền màu xanh lam liền khối 2px xung quanh mỗi nút của chúng tôi. Điều này cho phép chúng tôi phân biệt trực quan từng nút trong nhóm của mình.
Nhóm nút dọc
Thông thường, khi thiết kế một nhóm nút, bạn có thể muốn các nút xuất hiện theo chiều dọc. Đó là nơi xuất hiện thuộc tính CSS display:block.
Dưới đây là một ví dụ sử dụng display:block để hiển thị các nút trong nhóm nút CSS theo chiều dọc:
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: 2px solid blue;
display: block;
}
Mã của chúng tôi trả về:
Trình duyệt web của chúng tôi nhóm các nút này lại với nhau và hiển thị chúng theo chiều dọc.
Các nút hoạt ảnh
Khi bạn đang thiết kế một nút, bạn có thể quyết định làm cho nó tương tác hơn bằng cách tạo hoạt ảnh cho nó. Dưới đây, chúng tôi thảo luận một số cách để áp dụng hoạt ảnh cho một nút bằng CSS.
Đã nhấn
Trong CSS, bạn có thể tạo hiệu ứng làm cho nó trông giống như một nút được nhấn xuống khi người dùng nhấp vào nó.
Ví dụ:giả sử bạn muốn nút màu xanh lam nhạt với bóng xám đậm chuyển sang màu hồng với bóng xám nhạt 0,5 giây sau khi người dùng nhấp vào nút đó. Điều này sẽ cho người dùng cảm giác rằng họ đang nhấn một nút vật lý. Đây là mã bạn có thể sử dụng để thực hiện nhiệm vụ này:
index.html
<button class="button">Click me</button>
styles.css
.button {
padding: 20px;
font-size: 15px;
color: white;
background-color: lightblue;
border: none;
transition-duration: 0.5s;
border-radius: 8px;
box-shadow: 0 5px gray;
}
.button:active {
background-color: #ffb6c1;
box-shadow: 0 5px lightgray;
transform: translateY(5px);
}
Đây là kết quả của mã của chúng tôi:
Ở bên trái, bạn có thể thấy cách nút của chúng tôi xuất hiện trước khi nó được nhấp vào. Nút có màu xanh lam nhạt và có bóng hộp màu xám đậm. Ở bên phải, bạn có thể thấy sự xuất hiện của nút của chúng tôi sau khi nó được nhấp vào (và sau khi thời lượng chuyển đổi được chỉ định trôi qua). Nút có nền màu hồng và bóng hộp màu xám nhạt.
Hãy chia nhỏ mã của chúng ta. Theo phong cách .button của chúng tôi, chúng tôi:
- Tạo phần đệm 20px xung quanh nút của chúng tôi.
- Đặt kích thước phông chữ của văn bản trên nút của chúng tôi thành 15px.
- Đặt màu văn bản của nút của chúng tôi thành màu trắng.
- Đặt màu của nút của chúng tôi thành màu xanh lam nhạt.
- Đã xóa đường viền mặc định xung quanh nút của chúng tôi.
- Đặt thời lượng chuyển đổi khi di chuột của chúng tôi thành 0,5 giây.
- Đặt bán kính đường viền là 8px, tạo ra các góc tròn cho nút của chúng tôi
- Đặt bóng hộp màu xám dài 5px và xuất hiện bên dưới nút của chúng tôi.
Những điều này đặt kiểu cho nút của chúng tôi khi người dùng không di chuột qua nút bằng con trỏ của họ. Trong .button:phong cách hoạt động của chúng tôi, chúng tôi:
- Đặt màu nền của nút thành màu hồng nhạt.
- Đặt bóng mờ màu xám nhạt dài 5px và xuất hiện bên dưới nút của chúng tôi.
- Đặt một phép chuyển đổi translateY () để làm cho nút của chúng tôi xuất hiện khi được nhấn. Bạn có thể tìm hiểu thêm về quá trình chuyển đổi này trong hướng dẫn chuyển đổi CSS 2D của Career Karma.
Những kiểu này cho phép chúng tôi tạo hiệu ứng kích hoạt khi người dùng di chuột qua nút.
Làm mờ dần
Chúng ta có thể sử dụng các thuộc tính chuyển tiếp và độ mờ để tạo hiệu ứng mờ dần trên một nút. Khi được kết hợp với:bộ chọn di chuột, hiệu ứng mờ dần sẽ kích hoạt khi người dùng di chuột qua một đối tượng — trong trường hợp này là một nút.
Đây là mã chúng tôi có thể sử dụng để tạo nút mờ dần:
.button {
padding: 20px;
font-size: 15px;
color: white;
background-color: lightblue;
border: none;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
border-radius: 8px;
opacity: 0.7;
}
.button:hover {
opacity: 1;
}
Đây là kết quả của mã của chúng tôi:
Ở bên trái, bạn có thể thấy rằng nút của chúng tôi xuất hiện trong suốt hơn. Đây là kết quả của việc đặt giá trị của thuộc tính opacity thành 0,7.
Sau khi người dùng di chuột qua nút, nội dung của thuộc tính CSS .button:hover sẽ được đọc, điều này đặt độ mờ của nút thành 1. Điều này làm cho nút của chúng ta hoàn toàn mờ (không trong suốt).
Kết luận
HTML xác định cấu trúc của một nút trên trang web. Sau khi bạn xác định một nút, sau đó bạn có thể sử dụng CSS để tùy chỉnh nó dựa trên nhu cầu của bạn.
Hướng dẫn này đã thảo luận, với các ví dụ, cách tạo kiểu cho một nút bằng cách sử dụng một số thuộc tính CSS phổ biến. Bây giờ, bạn đã sẵn sàng để bắt đầu tạo kiểu cho các nút bằng CSS như một nhà phát triển web chuyên nghiệp!