Thẻ mặc định các nút sẽ có hình chữ nhật, chúng ta sẽ sử dụng thuộc tính border-radius để thêm các góc tròn vào nút Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
1.4 Tạo màu đường viền cho nútSử dụng thuộc tính border để thêm đường màu cho đường viền của nút Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
1.5 Tạo bóng cho nútSử dụng thuộc tính box-shadow để tạo hiệu ứng bóng cho nút Ví sụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
1.6 Nút bị vô hiệu hóaSử dụng thuộc tính opacity để thêm độ trong suốt cho nút (tạo giao diện “bị vô hiệu hóa”). Mẹo: Bạn cũng có thể thêm thuộc tính cursor với giá trị “not-allowed”, thuộc tính này sẽ hiển thị “biển báo cấm” khi bạn di chuột qua nút Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
1.7 Hiệu ứng khi di chuột qua nútSử dụng bộ chọn :hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nút đó Mẹo: Sử dụng thuộc tính transition-duration để xác định tốc độ của hiệu ứng khi di chuột qua nút Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
1.8 Xác định chiều rộng của nútTheo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (rộng bằng nội dung của nó). Sử dụng thuộc tính width để thay đổi chiều rộng của nút Button là những nút có thể click trên trang web của bạn. Ở bài viết này, Quantrimang.com sẽ hướng dẫn cách tạo các button và giới thiệu một số button đẹp mà bạn có thể áp dụng. Các nút kiểu dáng cơ bản.button {
background-color: #58257b; /* màu của Quản trị mạng ^^ */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Quản Trị MạngWebsite Quản Trị MạngWebsite Quản Trị Mạng Sử dụng thuộc tính background-color để thay đổi màu nền cho các nút tạo ra: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
CrimsonLightSalmonSeaGreenMidnightBlue Code đầy đủ: <!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: Crimson;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: LightSalmon;}
.button3 {background-color: SeaGreen;}
.button4 {background-color: MidnightBlue;}
.button5 {background-color: Indigo;}
</style>
</head>
<body>
<h2>Button Color</h2>
<button class="button">Crimson</button>
<button class="button button2">LightSalmon</button>
<button class="button button3">SeaGreen</button>
<button class="button button4">MidnightBlue</button>
<button class="button button5">Indigo</button>
</body>
</html>
Bạn sử dụng thuộc tính font-size hoặc padding để thay đổi kích cỡ của các nút tạo ra. Dùng font-size thì button co giãn theo kích thước chữ: .button1 {font-size: 10px;background-color: Crimson;}
.button2 {font-size: 12px;background-color: LightSalmon;}
.button3 {font-size: 16px;background-color: SeaGreen;}
.button4 {font-size: 20px;background-color: MidnightBlue;}
.button5 {font-size: 24px;background-color: Indigo;}
10px 12px 16px 20px24px Sử dụng padding để thay đổi phần không gian giữa nội dung hiển thị của phần tử với đường viền của nó, thuộc tính này cũng có thể làm thay đổi kích thước của button mà vẫn giữ nguyên kích cỡ nội dung. .button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
10px 24px 12px 28px 14px 40px 32px 16px Theo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (rộng bằng nội dung bên trong phần tử). Tuy nhiên, bạn cũng có thể dễ dàng sử dụng thuộc tính chiều rộng width để thay đổi độ rộng của nút: .button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
250px
50%
100% Sử dụng thuộc tính border-radius để bo tròn góc cạnh các button bằng cách xác định bán kính của các góc và bo tròn nó theo bán kính ấy. .button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
2px 4px 8px 12px 50% Code đầy đủ: <!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: Crimson;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: Crimson; border-radius: 2px;}
.button2 {background-color: LightSalmon; border-radius: 4px;}
.button3 {background-color: SeaGreen; border-radius: 8px;}
.button4 {background-color: MidnightBlue; border-radius: 12px;}
.button5 {background-color: Indigo; border-radius: 50%;}
</style>
</head>
<body>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
Bạn thêm và thực hành với các thuộc tính bên trên để xem sự thay đổi nhé. Bạn sử dụng thuộc tính border để thay đổi màu viền cho nút. .button1 {
background-color: white;
color: black;
border: 2px solid #DC143C;
}
...
Crimson LightSalmon SeaGreen MidnightBlue Nút bị vô hiệu hóaSử dụng thuộc tính opacity để thêm độ trong suốt cho nút (tạo giao diện "vô hiệu hóa"). Tip: Bạn cũng có thể thêm thuộc tính cursor (con trỏ chuột) với giá trị "not-allowed" để hiển thị dấu không thể click vào khi bạn di chuột qua: .disabled {
opacity: 0.6;
cursor: not-allowed;
}
Nút bình thường Nút bị vô hiệu hóa Code đầy đủ: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
0Đổi màu khi hover qua nútSử dụng :hover selector để thay đổi kiểu nút khi bạn di chuột qua. Tip: Nên dùng thuộc tính transition-duration để xác định tốc độ của hiệu ứng di chuột: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
1Code đầy đủ: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
2Sử dụng thuộc tính box-shadow để thêm bóng vào nút: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
3Nút có bóng - Hiệu ứng Shadow trong CSS
Nhóm gồm nhiều nútXóa thuộc tính margin và thêm float:left vào mỗi button để nối các nút vào với nhau tạo thành nhóm như trên. .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
4Các nút theo nhóm đặt dọc thì sử dụng display: block thay vì float: left để các nút chồng lên nhau: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
5.button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
6Thêm mũi tên vào nút khi di chuột vào: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
7Thêm hiệu ứng khi nhấp chuột .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
8Thêm hiệu ứng Fade in khi di chuột: .button1 {background-color: crimson;}
.button2 {background-color: lightsalmon;}
.button3 {background-color: seagreen;}
.button4 {background-color: midnightblue;}
.button5 {background-color: indigo;}
9Thêm hiệu ứng "ripple" khi nhấp chuột: <!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: Crimson;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: LightSalmon;}
.button3 {background-color: SeaGreen;}
.button4 {background-color: MidnightBlue;}
.button5 {background-color: Indigo;}
</style>
</head>
<body>
<h2>Button Color</h2>
<button class="button">Crimson</button>
<button class="button button2">LightSalmon</button>
<button class="button button3">SeaGreen</button>
<button class="button button4">MidnightBlue</button>
<button class="button button5">Indigo</button>
</body>
</html>
0Xem thêm: - Học CSS Cơ bản
- Học CSS Nâng cao
- Cách cài đặt Bootstrap trên máy tính
- Bộ chọn ID trong CSS
Thứ Sáu, 17/05/2019 16:32 4,3 ★ 12 👨 55.858 #CSS 0 Bình luận Sắp xếp theo Xóa Đăng nhập để Gửi Bạn nên đọc - Cách quản lý dữ liệu trên iPhone bằng Documents 5
- Cây cối xấu hổ, bí ẩn chưa có lời giải về hành vi kỳ quặc của thực vật
- Huawei tuyên bố đã xây dựng hệ điều hành của riêng mình cho smartphone và laptop từ năm 2012
- Những lần “chết hụt” của Mark Zuckerberg với Facebook
- Velocity 111, Pocket PC kiểu dáng BlackBerry
- MySpace về tay Specific Media với giá 35 triệu USD
CSS và CSS3 - TOP code CSS xếp hạng sao (Star Rating) đẹp cho website
Xem thêmCSS và CSS3 - CSS cơ bản
- Giới thiệu CSS
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Color
- CSS - Background
- CSS - Border
- CSS - Margin
- CSS - Padding
- CSS - Width và Height
- CSS - Box Model
- CSS - Outline
- CSS - Text
- CSS - Font
- CSS - Icon
- CSS - Link
- CSS - Tạo List
- CSS - Table
- CSS - Display
- CSS - Max-width
- CSS - Position
- CSS - Overflow
- CSS - Float và Clear
- CSS - Inline-block
- CSS - Align
- CSS - Combinator
- CSS - Pseudo-Class
- CSS - Pseudo-Element
- CSS - Opacity
- CSS - Navigation Bar
- CSS - Dropdown
- CSS - Image Gallery
- CSS - Image Sprite
- CSS - Attribute Selector
- CSS - Form
- CSS - Counter
- CSS - Layout
- CSS - Unit
- CSS - Specificity
- CSS nâng cao
- CSS - Rounded Corner
- CSS - Border Image
- CSS - Multiple Background
- CSS - Color
- CSS - Gradient
- CSS - Shadow Effect
- CSS - Text Effect
- CSS - Web Font
- CSS - 2D Transform
- CSS - 3D Transform
- CSS - Transition
- CSS - Animation
- CSS - Tooltip
- CSS - Flexbox
- CSS - Button
- CSS- @media
- Tạo hiệu ứng hover nút bằng CSS
- Công nghệ
- Ứng dụng
- Hệ thống
- Game - Trò chơi
- iPhone
- Android
- Linux
- Nền tảng Web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- macOS
- Phần cứng
- Thủ thuật SEO
- Kiến thức cơ bản
- Raspberry Pi
- Dịch vụ ngân hàng
- Lập trình
- Dịch vụ công trực tuyến
- Dịch vụ nhà mạng
- Nhà thông minh
- Download
- Ứng dụng văn phòng
- Tải game
- Tiện ích hệ thống
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Mail
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Hỗ trợ học tập
- Máy ảo
- Tiện ích
- Khoa học
- Khoa học vui
- Khám phá khoa học
- Bí ẩn - Chuyện lạ
- Chăm sóc Sức khỏe
- Khoa học Vũ trụ
- Khám phá thiên nhiên
- Điện máy
- Tủ lạnh
- Tivi
- Điều hòa
- Máy giặt
- Cuộc sống
- Kỹ năng
- Món ngon mỗi ngày
- Làm đẹp
- Nuôi dạy con
- Chăm sóc Nhà cửa
- Kinh nghiệm Du lịch
- Halloween
- Mẹo vặt
- Giáng sinh - Noel
- Tết 2023
- Quà tặng
- Giải trí
- Là gì?
- Nhà đẹp
- TOP
- Phong thủy
- Video
- Công nghệ
- Cisco Lab
- Microsoft Lab
- Video Khoa học
- Ô tô, Xe máy
- Làng Công nghệ
- Tấn công mạng
- Chuyện công nghệ
- Công nghệ mới
- Trí tuệ nhân tạo (AI)
- Anh tài công nghệ
- Bình luận công nghệ
- Tổng hợp
- Học CNTT
- Quiz công nghệ
- Microsoft Word 2016
- Microsoft Word 2013
- Microsoft Word 2007
- Microsoft Excel 2019
- Microsoft Excel 2016
- Hàm Excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Sheets - Trang tính
- Code mẫu
- Photoshop CS6
- Photoshop CS5
- HTML
- CSS và CSS3
- Python
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- SQL Server
- JavaScript
- Học PHP
- jQuery
- Học MongoDB
- Unix/Linux
- Học Git
- NodeJS
Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam. Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép. | 
