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

Hướng dẫn cách tạo nút cho trang web

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo nút cho trang web

Bước 1: Tạo cấu trúc HTML

 
  
   
   Hướng dẫn cách tạo nút cho trang web

Bước 2: Định dạng cho các nút bằng CSS

 
@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;
}

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