61. Button Trong CSS

Button trong CSS: bạn có thể tạo các nút (button) tùy chỉnh bằng cách sử dụng các thuộc tính để điều chỉnh kiểu dáng, màu sắc, viền và hiệu ứng hover. Dưới đây là một ví dụ về cách tạo một nút đơn giản bằng CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      transition: background-color 0.3s ease-in-out;
    }

    .custom-button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <button class="custom-button">Click Me</button>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một nút có class .custom-button.
Sử dụng các thuộc tính như padding, background-color, color, border, border-radius, cursor, text-align, text-decoration, và font-size để tạo kiểu cho nút.
Sử dụng transition để thêm hiệu ứng chuyển đổi màu nền khi nút được hover.
Sử dụng :hover để áp dụng các quy tắc khi người dùng hover vào nút, chẳng hạn như thay đổi màu nền.

Lưu ý rằng bạn có thể tùy chỉnh các giá trị và thuộc tính để tạo ra các loại nút khác nhau phù hợp với thiết kế của bạn.

Leave a Comment Cancel Reply