Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo 3D buttons bằng Bootstrap

Bước 1: Chuẩn bị nội dung HTML để tạo các nút

Bước 2: Định dạng CSS cho menu

 
 
body {	
font-family: Arial, Helvetica, sans-serif;
}


.btn {	
margin: 4px;	
box-shadow: 1px 1px 5px #888888;
}

.btn-xs {	
font-weight: 300;
}

.btn-hot {	
color: #fff;	
background-color: #db5566;	
border-bottom:2px solid #af4451;
}

.btn-hot:hover, .btn-sky.active:focus, .btn-hot:focus, .open>.dropdown-toggle.btn-hot 
{	
color: #fff;	
background-color: #df6a78;	
border-bottom:2px solid #b25560;	
outline: none;
}

.btn-hot:active, .btn-hot.active {	
color: #fff;	
background-color: #c04b59;	
border-top:2px solid #9a3c47;	
margin-top: 2px;
}

.btn-sunny {	
color: #fff;	
background-color: #f4ad49;	
border-bottom:2px solid #c38a3a;
}

.btn-sunny:hover, .btn-sky.active:focus, .btn-sunny:focus, .open>.dropdown-toggle.btn-sunny {	
color: #fff;	
background-color: #f5b75f;	
border-bottom:2px solid #c4924c;	
outline: none;
}

.btn-sunny:active, .btn-sunny.active {	
color: #fff;	
background-color: #d69840;	
border-top:2px solid #ab7a33;	
margin-top: 2px;
}

.btn-fresh {	
color: #fff;	
background-color: #51bf87;	
border-bottom:2px solid #41996c;
}

.btn-fresh:hover, .btn-sky.active:focus, .btn-fresh:focus, .open>.dropdown-toggle.btn-fresh {	
color: #fff;	
background-color: #66c796;	
border-bottom:2px solid #529f78;	
outline: none;
}

.btn-fresh:active, .btn-fresh.active {	
color: #fff;	
background-color: #47a877;	
border-top:2px solid #39865f;	
outline: none;	
outline-offset: none;	
margin-top: 2px;
}

.btn-sky {	
color: #fff;	
background-color: #0bacd3;	
border-bottom:2px solid #098aa9;
}

.btn-sky:hover, .btn-sky.active:focus, .btn-sky:focus, .open>.dropdown-toggle.btn-sky {	
color: #fff;	
background-color: #29b6d8;	
border-bottom:2px solid #2192ad;	
outline: none;
}

.btn-sky:active, .btn-sky.active {	
color: #fff;	
background-color: #0a97b9;	
border-top:2px solid #087994;	
outline-offset: none;	
margin-top: 2px;
}

.btn:focus, .btn:active:focus, .btn.active:focus {	
outline: none;	
outline-offset: 0px;
}

a {	
color:#fff;
}

a:hover {	
text-decoration:none;	
color:#fff;
}

Bước 3: Gọi thư viện Bootstrap

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất