Tạo nút bấm trong HTML
|
Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn truyền tải? Show Trong video này tôi chia sẻ bạn cách tư duy để tạo ra một một nút bấm link icon button chất lượng. Video hướng dẫn tạo Link Icon Button với Html CssMã code tạo Link Icon ButtonBên dưới là full mã code tạo button messenger và youtube. Trước hết bạn hãy tự thực hành để xem mình đang yếu ở chổ nào. Nếu có đoạn nào chưa ổn thì bạn có thể xem code mẫu để chỉnh lại cho chuẩn nhất.
Bạn thất link icon button thế nào? Bạn hiểu được những chia sẻ trong bài học này chứ? Quá trình xem video bạn có vướng mắc gì hãy để lại ở comment, tôi sẽ dành thời gian hỗ trợ bạn nhiều hơn. Nếu bạn đang học Html css nhưng không có một lộ trình bài bản bạn có thể tham khảo thêm chương trình Html Css 21 Ngày, hiện tại đã có trên 1038 người theo học và đi làm tốt. Tất cả bài viết | BootstrapBước 1: Tạo cấu trúc HTML
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
Bootstrap Xem (12816) Học thiết kế web giá rẻ Bước 1: Tạo cấu trúc HTML
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 |
