Hướng dẫn can you create buttons in css? - bạn có thể tạo các nút trong css không?

Tìm hiểu cách tạo kiểu nút bằng CSS.

Kiểu nút cơ bản

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; font-size: 16px; }
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; font-size: 16px; }
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; font-size: 16px; }
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Hãy tự mình thử »

Màu nút

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; font-size: 16px; }
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; font-size: 16px; }
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / / Use the transition-duration property to determine the speed of the "hover" effect:

Thí dụ

Kích thước nút
  transition-duration: 0.4s;
}

Sử dụng thuộc tính font-size để thay đổi kích thước phông chữ của nút:
  background-color: #4CAF50; /* Green */
  color: white;
}
...

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Kích thước nút
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Hãy tự mình thử »

Màu nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / / You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:

Kích thước nút

Sử dụng thuộc tính font-size để thay đổi kích thước phông chữ của nút:

Thí dụ

.
.button2 {width: 50%;}
.button3 {width: 100%;}

Hãy tự mình thử »

Sử dụng thuộc tính padding để thay đổi phần đệm của nút:

.

Các nút tròn

Sử dụng thuộc tính border-radius để thêm các góc tròn vào một nút:

. }

Nút màu biên giới

Sử dụng thuộc tính border để thêm đường viền màu vào nút:

Hãy tự mình thử »

.Button1 {& nbsp; màu nền: màu trắng; & nbsp; & nbsp; màu: đen; & nbsp; Biên giới: 2px rắn #4CAF50; /* Màu xanh lá */}...

. Bối cảnh: #ff9800; & nbsp; & nbsp; & nbsp; màu trắng;}

/ * Đỏ */. Nguy hiểm {& nbsp; & nbsp; & nbsp; màu đỏ;}

.danger: di chuột {& nbsp; & nbsp; & nbsp; Bối cảnh: #f44336; & nbsp; & nbsp; & nbsp; màu trắng;}

Thí dụ

.btn {& nbsp; & nbsp; & nbsp; biên giới: Không có; & nbsp; & nbsp; & nbsp; màu nền: kế thừa; & nbsp; & nbsp; & nbsp; Đệm: 14px 28px; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 16px; & nbsp; & nbsp; & nbsp; con trỏ: con trỏ; & nbsp; & nbsp; & nbsp; HIỂN THỊ: Nội hình chặn;}
Info
Warning
Danger
Default

/ * Xanh */. Thành công {& nbsp; & nbsp; & nbsp; màu xanh lá cây;}

.Success: di chuột {& nbsp; & nbsp; & nbsp; màu nền: #04aa6d; & nbsp; & nbsp; & nbsp; màu trắng;}

Thí dụ

.btn {& nbsp; & nbsp; & nbsp; biên giới: Không có; & nbsp; & nbsp; & nbsp; màu nền: kế thừa; & nbsp; & nbsp; & nbsp; Đệm: 14px 28px; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 16px; & nbsp; & nbsp; & nbsp; con trỏ: con trỏ; & nbsp; & nbsp; & nbsp; HIỂN THỊ: Nội hình chặn;}
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

/ * Trên chuột-over */. Btn: di chuột {nền: #EEE;}
.btn:hover {background: #eee;}

.Success {color: Green;}. Info {color: DodgerBlue;}. Cảnh báo {Color: Orange;}. Nguy hiểm {Color: Red;}. Mặc định {màu: Đen;
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

Hãy tự mình thử »

Các nút văn bản có nền riêng lẻ

Các nút văn bản có màu nền cụ thể khi di chuột:

Thí dụ

.btn {& nbsp; & nbsp; & nbsp; biên giới: Không có; & nbsp; & nbsp; & nbsp; màu nền: kế thừa; & nbsp; & nbsp; & nbsp; Đệm: 14px 28px; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 16px; & nbsp; & nbsp; & nbsp; con trỏ: con trỏ; & nbsp; & nbsp; & nbsp; HIỂN THỊ: Nội hình chặn;}
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

/ * Xanh */. Thành công {& nbsp; & nbsp; & nbsp; màu xanh lá cây;}
.success {
    color: green;
}

.Success: di chuột {& nbsp; & nbsp; & nbsp; màu nền: #04aa6d; & nbsp; & nbsp; & nbsp; màu trắng;}
    background-color: #04AA6D;
    color: white;
}

/ * Màu xanh */. Thông tin {& nbsp; & nbsp; & nbsp; Màu sắc: DodgerBlue;}
.info {
    color: dodgerblue;
}

.info: di chuột {& nbsp; & nbsp; & nbsp; Bối cảnh: #2196f3; & nbsp; & nbsp; & nbsp; màu trắng;}
    background: #2196F3;
    color: white;
}

/ * Orange */. Cảnh báo {& nbsp; & nbsp; & nbsp; màu cam;}
.warning {
    color: orange;
}

. Bối cảnh: #ff9800; & nbsp; & nbsp; & nbsp; màu trắng;}
    background: #ff9800;
    color: white;
}

/ * Đỏ */. Nguy hiểm {& nbsp; & nbsp; & nbsp; màu đỏ;}
.danger {
    color: red;
}

.danger: di chuột {& nbsp; & nbsp; & nbsp; Bối cảnh: #f44336; & nbsp; & nbsp; & nbsp; màu trắng;}
    background: #f44336;
    color: white;
}

/ * Màu xám */. Mặc định {& nbsp; & nbsp; & nbsp; màu đen;}
.default {
    color: black;
}

.default: di chuột {& nbsp; & nbsp; & nbsp; Bối cảnh: #E7E7E7;}
    background: #e7e7e7;
}

Hãy tự mình thử »

Các nút văn bản có nền riêng lẻ

Làm cách nào để tạo một nút hoạt động trong CSS?

Các nút được sử dụng trong CSS là gì?

Bạn có thể tạo một nút một hình ảnh CSS?

Bạn có thể tạo kiểu cho một nút trong HTML không?