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

<h2 align="center">Hướng dẫn cách tạo nút Outline bằng Bootstrap</h2>
<div class="container"> 
 <div class="row"> 
  <div class="col-md-4"> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-default">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-primary">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-success">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-info">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-warning">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-block btn-danger">Chào mừng Bạn đến với hocwebgiare.com</a>
   </p> 
  </div> 
  <div class="col-md-1"> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-default">Nút 1</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-primary">Nút 2</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-success">Nút 3</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-info">Nút 4</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-warning">Nút 5</a>
   </p> 
   <p><a href="http://hocwebgiare.com/" class="btn btn-outlined btn-danger">Nút 6</a>
   </p> 
  </div> 
 </div>
</div>

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

1	`<link` `rel="stylesheet"` `href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>`