Tất cả bài viết | Bootstrap
Cách tạo Button bằng Bootstrap
Trong bài thực hành học thiết kế web này các Bạn sẽ được hướng dẫn Cách tạo Button bằng Bootstrap
Bước 1: Tạo cấu trúc HTML cho các Button
Bước 2: Định dạng CSS cho Button
.pad-15 { padding: 15px 0;}.btn { color:#fff; border-radius: 0; position: relative; background:#363b45;}.btn:after { content: ""; border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent; position: absolute; top:31.5%; right:0;}.btn-sm:after { border-width: 5px 5px 5px 0; top:33.5%;}.btn-xs:after { border-width: 3px 3px 3px 0; top:35.5%;}.btn:hover, .btn:focus { outline: none; color:#fff;}.btn i { position: absolute; top: -1px; left:100%; width:32%; height: 103.5%; padding:15% 0;}.btn-sm i { height: 106.5%;}.btn-xs i { height: 108.5%; font-size: 10px; padding: 10% 0;}.btn.red:hover:after, .btn.blue:hover:after, .btn.orange:hover:after, .btn.green:hover:after { border-right-color:#363b45;}.btn.red:hover i, .btn.blue:hover i, .btn.orange:hover i, .btn.green:hover i { background:#363b45;}.btn.red:hover, .btn.red i { background: #ff4d4d;}.btn.red:after { border-right-color: #ff4d4d;}.btn.blue:hover, .btn.blue i { background: #3fb7c8;}.btn.blue:after { border-right-color: #3fb7c8;}.btn.orange:hover, .btn.orange i { background: #ef965c;}.btn.orange:after { border-right-color: #ef965c;}.btn.green:hover, .btn.green i { background: #7ad79a;}.btn.green:after { border-right-color: #7ad79a;}@media only screen and (max-width: 767px) { .btn { margin-bottom:20px;}}
Bước 3: Gọi thư viện Bootstrap và font-awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (2835) Học thiết kế web giá rẻ
