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
Bootstrap Xem (16934) Học thiết kế web giá rẻ