Bước 1: Dùng HTML tạo các nút Bước 2: Định nghĩa CSS Bước 3: Gọi thư viện Bootstrap Bước 4: Gọi thư viện JQUERYHướ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
Hướng dẫn cách tạo nút Outline bằng Bootstrap
.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;
}
- Tags:Tạo nút
- Tạo nút
- Tạo nút Outline
- Cách tạo nút Outline
- Bootstrap
- Bootstrap buttons
- CSS3
Hướng dẫn cách tùy biến màu Bootstrap Tooltip
Hướng dẫn cách tạo Accordion hướng bên phải bằng Bootstrap
Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap
Hướng dẫn cách tạo menu Responsive với Bootsnav
Hướng dẫn cách tạo Flexible Bootstrap Carousel
Hướng dẫn cách tạo Box Icon bằng Bootstrap
Hướng dẫn cách tạo Bootstrap ResCarousel
Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap
Hướng dẫn cách tạo VIP card bằng Bootstrap
Hướng dẫn cách tạo Bootstrap Vertical Slide
Tìm kiếm phổ biến
- Bootstrap badges
- Bootstrap
- Bootstrap buttons
- Bạn có thể quan tâm
- Hướng dẫn cách tùy biến màu Bootstrap Tooltip
- Hướng dẫn cách tạo Accordion hướng bên phải bằng Bootstrap
- Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap
- Hướng dẫn cách tạo menu Responsive với Bootsnav
- Hướng dẫn cách tạo Flexible Bootstrap Carousel
- Hướng dẫn cách tạo Box Icon bằng Bootstrap
- Hướng dẫn cách tạo Bootstrap ResCarousel
- Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap
- Hướng dẫn cách tạo VIP card bằng Bootstrap
- Hướng dẫn cách tạo Bootstrap Vertical Slide
- Tìm kiếm phổ biến
- Bootstrap badges
- Bootstrap buttons
- Bạn có thể quan tâm
- Hướng dẫn cách tùy biến màu Bootstrap Tooltip
- Hướng dẫn cách tạo Accordion hướng bên phải bằng Bootstrap
- Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap
- Hướng dẫn cách tạo menu Responsive với Bootsnav
- Hướng dẫn cách tạo Flexible Bootstrap Carousel
- Hướng dẫn cách tạo Box Icon bằng Bootstrap
- Hướng dẫn cách tạo Bootstrap ResCarousel
- Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap
- Hướng dẫn cách tạo VIP card bằng Bootstrap
- Hướng dẫn cách tạo Bootstrap Vertical Slide
- Tìm kiếm phổ biến
- Bootstrap badges
- Bootstrap Tooltip
- Bootstrap Lightbox
- Bootstrap Collapsible Panel
Bootstrap Modalbox
Bootstrap Fancybox
Bootstrap Datepicker
Bootstrap Scrollspy
Bootstrap touchspin
Bootstrap icon
Bootstrap narbar
Border-radius
Bootstrap tab