Hướng dẫn xóa viền button css

Trong bài viết này, bạn sẽ thấy cách tạo kiểu một nút bằng CSS.

Mục tiêu của tôi ở đây chủ yếu là thể hiện cách các quy tắc và kiểu CSS khác nhau được áp dụng và sử dụng. Chúng tôi sẽ không thấy nhiều cảm hứng thiết kế và chúng tôi sẽ không thảo luận về ý tưởng cho kiểu dáng.

Thay vào đó, đây sẽ là một cái nhìn tổng quan về cách các phong cách hoạt động, những thuộc tính nào thường được sử dụng và cách chúng có thể được kết hợp.

Trước tiên bạn sẽ xem cách tạo một nút trong HTML. Sau đó, bạn sẽ tìm hiểu cách ghi đè các kiểu nút mặc định. Cuối cùng, bạn sẽ có một cái nhìn thoáng qua về cách tạo kiểu cho ba trạng thái khác nhau của họ.

Mục lục

1. Tạo một nút trong HTML
2. Thay đổi kiểu dáng mặc định của các nút
   1. Thay đổi màu nền
   2. Thay đổi màu văn bản
   3. Thay đổi kiểu biên giới
   4. Thay đổi kích thước
3. Trạng thái nút kiểu
   1. Phong cách lơ lửng trạng thái
   2. Phong cách tập trung trạng thái
   3. Phong cách hoạt động trạng thái
4. Sự kết luận

Bắt đầu nào!

Cách tạo nút trong HTML

Để tạo một nút, hãy sử dụng phần tử

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Đây là một tùy chọn dễ tiếp cận và ngữ nghĩa hơn so với việc sử dụng một thùng chứa chung được tạo ra với phần tử

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Trong tệp

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Hãy phá vỡ dòng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

• Trước tiên, bạn thêm phần tử nút, bao gồm thẻ mở ____27 và đóng thẻ

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  62.
• Thuộc tính

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  63 trong thẻ

  .button {
      position: absolute;
      top:50%;
      background-color:#0a0a23;
  }
  

  7 mở ra rõ ràng tạo một nút có thể nhấp. Vì nút cụ thể này không được sử dụng để gửi biểu mẫu, nên nó rất hữu ích cho các lý do ngữ nghĩa để thêm nó để làm cho mã rõ ràng hơn và không kích hoạt bất kỳ hành động không mong muốn nào.
• Thuộc tính

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  65 sẽ được sử dụng để tạo kiểu nút trong một tệp CSS riêng biệt. Giá trị

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  66 có thể là bất kỳ tên nào khác bạn chọn. Ví dụ: bạn có thể đã sử dụng

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  67.
• Văn bản

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  68 là văn bản có thể nhìn thấy bên trong nút.

Bất kỳ kiểu nào sẽ được áp dụng cho nút sẽ đi vào bên trong tệp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Bạn có thể áp dụng các kiểu cho nội dung HTML bằng cách liên kết hai tệp với nhau. Bạn làm điều này với thẻ

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Trong tệp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Lưu ý rằng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Mã từ trên sẽ dẫn đến những điều sau:

Kiểu dáng mặc định của các nút sẽ thay đổi tùy thuộc vào trình duyệt bạn đang sử dụng.

Đây là một ví dụ về cách các Kiểu gốc cho các nút nhìn trên trình duyệt Google Chrome.

Cách thay đổi kiểu dáng mặc định của các nút

Cách thay đổi màu nền của các nút

Để thay đổi màu nền của nút, hãy sử dụng thuộc tính CSS

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Trong bộ chọn

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Cách thay đổi màu văn bản của các nút

Màu mặc định của văn bản là màu đen, vì vậy khi bạn thêm một màu nền tối, bạn sẽ nhận thấy rằng văn bản đã biến mất.

Một điều khác để đảm bảo là có đủ độ tương phản giữa màu nền và màu văn bản của nút. Điều này giúp làm cho văn bản dễ đọc và dễ dàng hơn trên mắt.

Tiếp theo, sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Cách thay đổi kiểu biên giới của các nút

Chú ý màu xám xung quanh các cạnh của nút? Đó là màu mặc định của biên giới của nút.

Một cách để khắc phục điều này là sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Một cách khác là tháo đường viền hoàn toàn bằng cách sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Tiếp theo, bạn cũng có thể làm tròn các cạnh của nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Bạn cũng có thể thêm hiệu ứng bóng tối nhẹ xung quanh nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Cách thay đổi kích thước của các nút

Cách để tạo thêm không gian bên trong biên giới của nút là tăng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Dưới đây tôi đã thêm giá trị 15px cho phần đệm trên, dưới, phải và trái của nút.

Tôi cũng đặt chiều cao và chiều rộng tối thiểu, với các thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Cách tạo kiểu nút trạng thái

Các nút có ba trạng thái khác nhau:

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  7

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  98

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  99

Tốt nhất là ba tiểu bang được tạo kiểu khác nhau và không chia sẻ cùng một phong cách.

Trong các phần sau, tôi sẽ đưa ra một lời giải thích ngắn gọn về ý nghĩa của mỗi tiểu bang và điều gì kích hoạt chúng. Bạn cũng sẽ thấy một số cách bạn có thể tạo kiểu nút cho từng trạng thái riêng biệt.

Cách tạo kiểu * { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% } 7 trạng thái

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Để thay đổi kiểu của nút khi bạn di chuột qua nó, hãy sử dụng bộ chọn Pseudoclass

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Một thay đổi phổ biến để thực hiện với

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Để làm cho sự thay đổi ít đột ngột hơn, hãy cặp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Tài sản

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Việc thay đổi màu nền sẽ diễn ra chậm hơn một chút so với nó mà không có thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Trong ví dụ trên, tôi đã sử dụng giá trị mã màu hex để làm cho màu nền trở thành màu sáng hơn khi tôi di chuột qua nút.

Với sự trợ giúp của tài sản

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Hãy nhớ rằng Pseudoclass

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Cách tạo kiểu .button { position: absolute; top:50%; background-color:#0a0a23; color: #fff; border:none; border-radius:10px; } 8 trạng thái

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Nếu bạn đang theo dõi, khi bạn tập trung vào nút sau khi nhấn phím

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Chú ý đường viền màu xanh nhẹ xung quanh nút khi nó tập trung?

Các trình duyệt có kiểu dáng mặc định cho

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Tuy nhiên, bạn có thể tạo các kiểu tùy chỉnh cho nó và làm cho nó dễ dàng phát hiện.

Một cách để làm như vậy là bằng cách đặt màu phác thảo thành đầu tiên là

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Sau đó, bạn có thể duy trì

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Bạn cũng có thể một lần nữa ghép các kiểu này với thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Cách tạo kiểu cho trạng thái .button { position: absolute; top:50%; background-color:#0a0a23; color: #fff; border:none; border-radius:10px; } 9

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Điều đó đang được nói, hãy nhìn vào những gì xảy ra khi tôi nhấp vào nút sau khi tôi áp dụng và giữ các kiểu cho các trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Các kiểu trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Các kiểu trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Tuy nhiên, hãy nhớ rằng họ không giống nhau.

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Để thay đổi kiểu khi người dùng nhấp vào nút, hãy áp dụng các kiểu cho

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Trong trường hợp này, tôi đã thay đổi màu nền của nút khi người dùng nhấp vào nó

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Sự kết luận

Và bạn có nó rồi đấy! Bây giờ bạn đã biết những điều cơ bản về cách tạo kiểu một nút với CSS.

Chúng tôi đã đi qua cách thay đổi màu nền và màu văn bản của các nút cũng như cách tạo kiểu cho các nút cho các trạng thái khác nhau của chúng.

Để tìm hiểu thêm về thiết kế web, hãy xem chứng nhận thiết kế web đáp ứng của Freecodecamp. Trong các bài học tương tác, bạn sẽ học HTML và CSS bằng cách xây dựng 15 dự án thực hành và 5 dự án chứng nhận.

Lưu ý rằng chứng chỉ trên vẫn còn trong phiên bản beta - nếu bạn muốn phiên bản ổn định mới nhất, hãy kiểm tra tại đây.

Cảm ơn bạn đã đọc và mã hóa hạnh phúc!