nút bấm

<div class="container"> 
 <div class="row"> 
  <h1 class="text-center">Hướng dẫn cách tạo nút cho trang web</h1> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/">Trang chủ</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/dang-ky-khoa-hoc-online.html">Đăng ký</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/dich-vu-web1/Tu-van-thiet-ke-website.html">Dịch vụ</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/hoi-dap.html">Hỏi đáp</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/nguyen-phat-tai-youtube-channel.html">Video</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button><a href="http://hocwebgiare.com/blog.html">Blog</a>
   </button> 
  </div> 
 </div> 
 <div class="row"> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/">Trang chủ</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/dang-ky-khoa-hoc-online.html">Đăng ký</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/dich-vu-web1/Tu-van-thiet-ke-website.html">Dịch vụ</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/hoi-dap.html">Hỏi đáp</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/nguyen-phat-tai-youtube-channel.html">Video</a>
   </button> 
  </div> 
  <div class="col-xs-6 col-md-2"> 
   <button class="outline"><a href="http://hocwebgiare.com/blog.html">Blog</a>
   </button> 
  </div> 
 </div>
</div>
Bước 2: Định dạng cho các nút bằng CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
@import 'https://fonts.googleapis.com/css?family=Roboto';
html, body {    
height: 100%;   
width: 100%;    
display: flex;  
flex-flow: column nowrap;   
justify-content: center;    
align-items: center;    
background-color: #444444;
}
 
a{  
color:#FFF; 
text-decoration:none;
}
 
a:visited{  
color:#FFF; 
text-decoration:none;
}
 
a:hover{    
color:#FFF; 
text-decoration:none;
}
 
h1{ 
color:#F9C
}
 
button {    
display: inline-block;  
margin: 0.75rem;    
padding: 0.75rem 1.5rem;    
border: none;   
outline: none;  
background-color: #ea4c89;  
color: #fff;    
font-family: inherit;   
font-size: 1.125em; 
font-weight: 300;   
font-family: 'Roboto', sans-serif;  
line-height: 1.5rem;    
text-decoration: none;  
text-transform: uppercase;  
cursor: pointer;    
transition: all 150ms ease-out; 
width: 180px;   
letter-spacing: 4px;
}
 
 
button:focus, button:hover {    
color:#FFF; 
text-decoration:none;   
background-color: #ea4c89;  
box-shadow: 0 0 0 0.1875rem white,  0 0 0 0.375rem #ea4c89;
}
 
 
button:active { 
background-color: #ea4c89;  
box-shadow: 0 0 0 0.1875rem #ea4c89,  0 0 0 0.375rem #ea4c89;   
transition-duration: 75ms;  
text-decoration:none;
}
 
button.outline {    
border: 0.1875rem solid #ea4c89;    
background-color: transparent;  
color: #ea4c89;
}
 
button.outline:focus, button.outline:hover {    
border-color: #ea4c89;  
color: #ea4c89;
}
 
button.outline:active { 
border-color: #ea4c89;  
color: #ea4c89;
}
?
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>