Trong ví dụ trên, chúng tôi đã thêm

.btn-primary:hover{
    background-color: white;
}

0. Vì vậy, khi người dùng di chuột vào một nút, nó sẽ thay đổi màu của nút thành

.btn-primary:hover{
    background-color: white;
}

1

Chúng tôi sẽ sử dụng hai phương pháp. Phương pháp đầu tiên là thay đổi nền và màu của nút. Thứ hai là thay đổi nền của nút bằng. trước phần tử giả

Nút bên trong biểu mẫu (loại nút =”gửi”)

Chỉ cần thay đổi hình nền và màu sắc

Xem Bút

1 Chỉ cần thay đổi nền và màu — nút type="submit" của kirill (@kirivaha) trên CodePen

Thay đổi nó với. trước phần tử giả (lưu ý khoảng thời gian bạn muốn đặt bên trong nút)

Xem Bút Thay đổi hình nền bằng. trước — button type="submit" của kirill (@kirivaha) trên CodePen

Nút bên trong biểu mẫu (kiểu nhập=”gửi”)

Nguyên tắc tương tự như trên, nhưng thay vì button[type=”submit”] bạn cần đặt input[type=”submit”] trong CSS

Nút là một phần tử riêng biệt trong mã html

Chỉ cần thay đổi hình nền và màu sắc

Xem Bút Thay đổi màu của nút — div thông thường của kirill (@kirivaha) trên CodePen

Và bây giờ chúng ta thay đổi màu sắc với. trước phần tử giả

Xem Bút Đổi màu nút bấm bằng. trước — div thông thường của kirill (@kirivaha) trên CodePen

Nút trong Bootstrap

Bạn cần tìm đúng lớp (hoặc id), cũng như thứ tự sắp xếp phù hợp của các phần tử để thay đổi màu nút trong Bootstrap

Ví dụ, bạn có nút

Và bạn muốn thay đổi màu sắc của nó khi di chuột. Sau đó, tôi khuyên bạn nên viết như sau bằng CSS

.btn.btn-outline-primary:hover {
  background: red; /* Or any other color */
  /* I would also change the color for the border */
}

Cách thay đổi màu nút bằng JS

Tôi sẽ chỉ cho bạn hai cách để thay đổi màu nút khi di chuột bằng JavaScript

Cách đầu tiên - chúng tôi sẽ thêm một lớp từ nút của chúng tôi thông qua JS

Xem Bút Thay đổi màu của nút bằng JS — bằng cách thêm lớp mới của kirill (@kirivaha) trên CodePen

Cách thứ hai – chúng ta sẽ thay đổi kiểu css trực tiếp trong JS

Xem Bút không đề của kirill (@kirivaha) trên CodePen

Hy vọng tôi đã giúp bạn hiểu cách bạn có thể thay đổi màu nút khi con trỏ trỏ vào nó. Tóm lại, tôi khuyên bạn nên xem video và cuối cùng làm sáng tỏ tất cả các câu hỏi

Trong những năm qua, tôi đã viết một số hướng dẫn về tùy chỉnh bootstrap. Sử dụng twitter bootstrap framework để phát triển web là tốt; . Nhưng nếu bạn không thay đổi giao diện của mẫu của mình thì có thể cuối cùng bạn sẽ trông giống như hàng triệu trang web khác trên internet. Bạn có thể nhận được một số giao diện bootstrap đẹp mắt tại đây, nếu không thì hãy tự học cách tùy chỉnh nó với các hướng dẫn về bootstrap của chúng tôi. Nó thực sự đơn giản hơn bạn nghĩ và thú vị hơn rất nhiều

Bây giờ hãy xem cách thay đổi màu nút trong bootstrap

Làm cách nào để thay đổi màu nút trong Bootstrap?

Bootstrap cung cấp một số lớp nút mặc định để tạo nút nhanh chóng. Và nó cũng đi kèm với các lớp css cho phép bạn kiểm soát kích thước của các nút đó (

.btn-primary:hover{
    background-color: white;
}

2

.btn-primary:hover{
    background-color: white;
}

0 &

.btn-primary:hover{
    background-color: white;
}

1)

Đây là các kiểu nút mặc định của bootstrap

Đánh dấu HTML để tạo các nút Bootstrap

Đánh dấu ở trên hiển thị các nút bootstrap mặc định như thế này

Bây giờ chúng ta sẽ ghi đè các kiểu nút khởi động cơ bản này để thay đổi màu sắc và hành vi của các nút

Kiểu CSS

/* default button */
.btn-default {
    background-color: 

# FFF;

    color: 

# 333;

    border-color: 

# adadad;

    border-radius: 25px;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active    {
    background-color: 

# ebebeb;

    color: 

# 333;

    border-color: 

# adadad;

}
/* primary button */
.btn-primary {
    background-color: 

# FFF;

    color: 

# 285e8e;

    border-color: 

# 3276b1;

    border-radius: 25px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active    {
    background-color: 

# 3276b1;

    color: 

# FFF;

    border-color: 

# 285e8e;

}
/* success button */
.btn-success {
    background-color: 

# FFF;

    color: 

# 398439;

    border-color: 

# 47a447;

    border-radius: 25px;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active    {
    background-color: 

# 47a447;

    color: 

# FFF;

    border-color: 

# 398439;

}
/* info button */
.btn-info {
    background-color: 

# FFF;

    color: 

# 269abc;

    border-color: 

# 39b3d7;

    border-radius: 25px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active    {
    background-color: 

# 39b3d7;

    color: 

# FFF;

    border-color: 

# 269abc;

}
/* warning button */
.btn-warning {
    background-color: 

# FFF;

    color: 

# d58512;

    border-color: 

# ed9c28;

    border-radius: 25px;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active    {
    background-color: 

# ed9c28;

    color: 

# FFF;

    border-color: 

# d58512;

}
/* danger button */
.btn-danger {
    background-color: 

# FFF;

    color: 

# ac2925;

    border-color: 

# d2322d;

    border-radius: 25px;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: 

# d2322d;

    color: 

# FFF;

    border-color: 

# ac2925;

}

Các kiểu css ở trên bây giờ sẽ làm cho các nút trông như thế này

Và chúng sẽ trông như thế này ở trạng thái di chuột

Điều gì sẽ xảy ra nếu bạn muốn giữ các nút cơ bản nhưng muốn tạo một số kiểu nút hoàn toàn mới? . Chỉ cần tạo một lớp nút mới (như

.btn-primary:hover{
    background-color: white;
}

2. và tạo kiểu cho nó theo sở thích của bạn và bạn đã hoàn tất

cũng đọc

• Cách thêm biểu tượng/hình ảnh vào nút trong Bootstrap
• Cách tạo Thư viện hình ảnh đáp ứng trong Bootstrap

Điều đó giải thích về việc thay đổi màu nút trong bootstrap. Chỉ cần dành chút thời gian để tùy chỉnh mẫu bootstrap mặc định và kết quả chắc chắn sẽ rất bổ ích. )

Bạn có thể tùy chỉnh các nút Bootstrap không?

Do khung của nó, các nút của Bootstrap đã được tạo kiểu sẵn khi chúng được thêm vào trang web. Tuy nhiên, nếu bạn muốn tạo kiểu nút tùy chỉnh của riêng mình, bạn có thể làm điều đó trong tệp CSS của Bootstrap .

Bạn có thể tùy chỉnh màu Bootstrap không?

Sử dụng ghi đè CSS khả thi đối với các tùy chỉnh Bootstrap đơn giản nhưng đối với các thay đổi sâu rộng hơn, SASS là phương pháp tốt hơn