Cách tạo: nút văn bản

Cách thiết lập樣式 nút văn bản

Bước 1 - Thêm HTML：

<button class="btn success">Thành công</button>
<button class="btn info">Thông tin</button>
<button class="btn warning">Cảnh báo</button>
<button class="btn danger">Nguy hiểm</button>
<button class="btn default">Mặc định</button>

Bước 2 - Thêm CSS:

Để có được外观 của“nút văn bản”, chúng tôi đã loại bỏ màu nền mặc định và viền:

.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  con trỏ: pointer;
  display: inline-block;
{}
/* Khi trỏ chuột */
.btn:hover {background: #eee;}
.success {màu xanh lục;}
.info {màu xanh dương;}
.warning {màu cam;}
.danger {màu đỏ;}
.default {màu đen;}

Thử ngay

Nút văn bản có nền riêng biệt

Nút văn bản có màu nền đặc biệt khi trỏ chuột:

.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    con trỏ: pointer;
    display: inline-block;
{}
/* Màu xanh lục */
.success {
    màu xanh lục;
{}
.success:hover {
    background-color: #04AA6D;
    màu trắng;
{}
/* Màu xanh */
.info {
    màu xanh dương;
{}
.info:hover {
    background: #2196F3;
    màu trắng;
{}
/* Màu cam */
.warning {
    màu cam;
{}
.warning:hover {
    background: #ff9800;
    màu trắng;
{}
/* Màu đỏ */
.danger {
    màu đỏ;
{}
.danger:hover {
    background: #f44336;
    màu trắng;
{}
/* Màu xám */
.default {
    màu đen;
{}
.default:hover {
    background: #e7e7e7;
{}

Thử ngay

Trang liên quan

Hướng dẫn:Nút CSS