Tạo các nút tùy chỉnh bằng cách sử dụng CSS là một trong những ứng dụng nhiều nhất sử dụng trong Website. Tôi thực sự tìm thấy vô số hướng dẫn về cách tạo các nút với phong cách độc đáo mà bạn có thể áp dụng cho trang Web của bạn trên Internet. Nhưng dù sao, tôi ở đây để phục vụ bạn theo cách tốt nhất mà tôi có thể. Nếu bạn đang tìm kiếm một số nút phong cách, thú vị để sử dụng trên trang web WordPress của mình, thì bạn có thể áp dụng một số trong các ví dụ bên dưới.
Kiểu nút thứ nhất
Nút đầu tiên chúng ta có một thiết kế rất đơn giản với các góc hơi bo tròn. Phong cách này là một trong những kiểu phổ biến nhất mà bạn sẽ thấy trên nhiều loại trang Web. Khi di chuột, nút này từ từ chuyển đổi với khoảng cách giữa các chữ cái và thay đổi màu sắc. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Lưu ý: Bạn có thể thay đổi tên lớp thành bất kỳ tên nào bạn thích, ví dụ:
button_avàbutton_b…
Bạn cũng có thể thay đổi các giá trị color, padding, border, typography để phù hợp với thiết kế trang Web của mình.
Xem trước
Mã HTML
<div class="button_cont" align="center"><a class="vidu_a" href="#" target="_blank" rel="nofollow noopener">Kiểu nút thứ nhất</a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 1*/
.vidu_a {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #775bc9;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.vidu_a:hover {
background: #a88ef3;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(129,105,2020.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(129,105,2020.57);
box-shadow: 5px 40px -10px rgba(129,105,202,0.57);
transition: all 0.4s ease 0s;
cursor: pointer;
}Kiểu nút thứ 2
Kiểu nút thứ hai hiển thị bên dưới cũng giống như kiểu ở trên, tuy nhiên các cạnh được làm tròn hơn rất nhiều. Khi di chuột, nút được nâng lên với hiệu ứng bóng nhẹ. Văn bản cũng có hiệu ứng phát sáng bóng nhẹ khi di chuột. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Xem trước
Kiểu nút thứ 2
Mã HTML
<div class="button_cont" align="center"><a href="#" target="_blank" class="vidu_b" draggable="false" rel="nofollow noopener noreferrer">Kiểu nút thứ 2</a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 2*/
.vidu_b {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #28e060;
padding: 20px;
border-radius: 50px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.vidu_b:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(129,105,202,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(129,105,202,0.57);
transition: all 0.4s ease 0s;
cursor: pointer;
}Kiểu nút thứ 3
Phong cách nút thứ 3 mà tôi muốn chia sẻ là một trong những phong cách yêu thích của tôi. Nút này hình vuông không có góc bo tròn. Khi di chuột, nút chuyển màu đồng nhất thành màu #28e060 và màu văn bản chuyển thành màu trắng #ffffff. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Xem trước
Mã HTML
<div class="button_cont" align="center"><a href="#" target="_blank" class="vidu_c" rel="nofollow noopener">Kiểu nút thứ 3</a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 3*/
.vidu_c {
color: #775bc9 !important;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 20px;
border: 4px solid #775bc9 !important;
display: inline-block;
transition: all 0.4s ease 0s;
}
.vidu_c:hover {
color: #ffffff !important;
background: #28e060;
border-color: #28e060 !important;
transition: all 0.4s ease 0s;
cursor: pointer;
}Kiểu nút thứ 4
Kiểu nút thứ 4 mà bạn sẽ tìm thấy bên dưới thực sự là một kiểu khá thú vị. Đây là một nút kiểu khác với các góc hơi tròn và đường viền 4px. Sự khác biệt là khi di chuột, nút chuyển từ màu xanh lá cây #20bf6b sang màu tím #775bc9, thành các cạnh tròn hoàn toàn. Màu văn bản cũng thay đổi. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Xem trước
Mã HTML
<div class="button_cont" align="center"><a href="#" target="_blank" class="vidu_d" rel="nofollow noopener noreferrer" draggable="false">Kiểu nút thứ 4</a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 4*/
.vidu_d {
color: #20bf6b !important;
text-transform: uppercase;
background: #ffffff;
padding: 20px;
border: 4px solid #20bf6b !important;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.vidu_d:hover {
color: #775bc9 !important;
border-radius: 50px;
border-color: #775bc9 !important;
transition: all 0.3s ease 0s;
cursor: pointer;
}
Kiểu nút thứ 5
Đây là một kiểu nút khác mà bạn có thể thử trên trang Web của mình. Hãy xem bản xem trước bên dưới, bạn sẽ thấy đây là một nút trông đủ đơn giản một lần nữa với các góc hơi tròn. Khi di chuột, nút mở rộng và chuyển sang trong suốt với bóng đổ màu xung quanh cạnh. Khoảng cách giữa các chữ cái cũng tăng lên khi di chuột. Khi bạn di chuyển con trỏ ra khỏi nút, các chữ cái sẽ chuyển trở lại bình thường. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Xem trước
Mã HTML
<div class="button_cont" align="center"><a href="#" target="_blank" class="vidu_e" rel="nofollow noopener">Kiểu nút thứ 5</a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 5*/
.vidu_e {
border: none;
background: #775bc9;
color: #ffffff !important;
font-weight: 500;
padding: 20px;
text-transform: uppercase;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.vidu_e:hover {
color: #775bc9 !important;
font-weight: 600 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(129,105,202,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(129,105,202,0.57);
transition: all 0.3s ease 0s;
cursor: pointer;
}
Kiểu nút thứ 6
OK, vậy là chúng ta đi đến kiểu nút cuối cùng và kiểu này tôi nghĩ bạn sẽ thích nhất. Ở đây chúng ta có một nút đơn giản với màu Gradient. Khi di chuột, nút chuyển đổi với các mũi tên động xuất hiện trong nút. Nút này hoàn toàn có thể tùy chỉnh, vì vậy hãy thoải mái chỉnh sửa nó theo bất kỳ cách nào bạn muốn. Vui lòng tìm mã HTML và CSS bên dưới nút xem trước.
Xem trước
Mã HTML
<div class="button_cont" align="center"><a href="#" target="_blank" class="vidu_f" rel="nofollow"><span style="color: #fff;>Kiểu nút thứ 6</span></a></div>
Mã CSS
/*--Mã tạo khoảng cách từ nút so với phía trên và phía dưới*/
.button_cont {
margin-top: 20px;
margin-bottom: 20px;
}
/*--Ví dụ thứ 6*/
.vidu_f {
border-radius: 4px;
background: linear-gradient(to right, #775bc9, #08cf96) !important;
border: none;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
font-size: 21px;
padding: 20px;
width: 200px;
transition: all 0.4s;
cursor: pointer;
margin: 5px;
}
.vidu_f span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.4s;
}
.vidu_f span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.vidu_f:hover span {
padding-right: 25px;
}
.vidu_f:hover span:after {
opacity: 0.5;
right: 0;
} Kết luận
Vì vậy, các bạn đã có 6 kiểu nút tuyệt vời để thêm vào trang Web của bạn hoàn chỉnh với HTML và CSS. Hãy thoải mái tinh chỉnh và sửa đổi các nút này theo bất kỳ cách nào bạn muốn. Nếu bạn cần hỗ trợ định cấu hình chúng vào trang Web của mình hoặc nếu bạn gặp bất kỳ sự cố nào, hãy cho tôi biết. Hãy nhớ rằng, việc thêm các nút sành điệu như thế này vào trang web của bạn rất dễ dàng. Những gì bạn phải làm là kiểm tra xem nút nào trên các trang của bạn đang hoạt động tốt nhất để bạn chuyển đổi sang những kiểu bắt mắt như thế này.
Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!
- Tạo nút bóng đổ cổ điển với CSS đơn giản
- Flat UI Buttons, FILL màu cho nút bằng CSS
- Nút Google CSS với hiệu ứng nhẹ nhàng
- Tạo nút phẳng với hiệu ứng di chuột, Flat UI Buttons
- Tạo nút CSS với hiệu ứng di chuột, hiện Icon Font Awesome
- Tạo 2 nút bài trước và bài sau bằng CSS đơn giản
- Tạo hiệu ứng Preloader giống Tradevn.tech
- Tạo thanh tiến trình đơn giản bằng CSS
- Chiều cao và chiều rộng trong CSS
- Tạo hiệu ứng gõ chữ đơn giản bằng CSS
- Padding trong CSS
- Canh lề trong CSS
- Đường viền trong CSS
- Cách tạo hộp thông báo bên trong bài viết hiện đại
- Cách tạo vòng tròn Loading với hiệu ứng xoay vòng với CSS
