Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo nút Outline bằng Bootstrap
Trong bài thực hành này các bạn sẽ được hướng dẫn cách tạo nút Outline bằng Bootstrap
Bước 1: Dùng HTML tạo các nút
Hướng dẫn cách tạo nút Outline bằng Bootstrap
Bước 2: Định nghĩa CSS
.btn-outlined {
border-radius: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-outlined.btn-default {
background: none;
border: 3px solid #CCC;
color: #CCC;
}
.btn-outlined.btn-default:hover, .btn-outlined.btn-default:active {
color: #FFF;
background-color: #CCC;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}
.btn-outlined.btn-primary {
background: none;
border: 3px solid #428bca;
color: #428bca;
}
.btn-outlined.btn-primary:hover, .btn-outlined.btn-primary:active {
color: #FFF;
background: #428bca;
border-color: #428bca:
}
.btn-outlined.btn-success {
background: none;
border: 3px solid #5cb85c; color: #5cb85c;
}
.btn-outlined.btn-success:hover, .btn-outlined.btn-success:active {
color: #FFF;
background: #47a447;
}
.btn-outlined.btn-info {
background: none;
border: 3px solid #5bc0de; color: #5bc0de;
}
.btn-outlined.btn-info:hover, .btn-outlined.btn-info:active {
color: #FFF; background: #39b3d7;
}
.btn-outlined.btn-warning {
background: none;
border: 3px solid #f0ad4e;
color: #f0ad4e;
}
.btn-outlined.btn-warning:hover, .btn-outlined.btn-warning:active {
color: #FFF;
background: #ed9c28;
}
.btn-outlined.btn-danger {
background: none;
border: 3px solid #d9534f;
color: #d9534f;
}
.btn-outlined.btn-danger:hover, .btn-outlined.btn-danger:active {
color: #FFF;
background: #d2322d;
}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (2537) Học thiết kế web giá rẻ
