26.6.20 |
0
nhận xét
|
lượt xem
Để làm đẹp hơn cho button cũng như để cho độc giả dễ hình dung hơn về chức năng của các button trên website người ta thường chèn các icon hoặc hình ảnh vào. Và ở bài viết này mình sẽ hướng dẫn tạo button kèm icon tương ứng với chức năng của button đó, và icon này mình sẽ dử dụng từ font của awesome
Font Awesome là gì ?
Đây là một loại font dạng hình ảnh có thể hiển thị tương tự như chữ viết. Và nó có những ưu điểm như là:- Hiển thị Icon một cách nhanh chóng đơn giản
- Có thể thay đổi kích thước, màu sắc vì nó là text
- Không bị vỡ hình dù có phóng to bao nhiêu
- Đặc biệt Font Awesome ở phiên bản miễn phí thôi cũng có tới hơn 1000 icon các loại, thuộc nhiều chủ để khác nhau.Bạn có thể thoải mái lựa chọn.
Đưa font Awesome vào blog/website
Bạn chỉ cần chèn đoạn code bên dưới vào trong thẻ <head><link href='https://cdn.jsdelivr.net/gh/startinhit/font-awesome/css/all.css' rel='stylesheet'/>
Tạo button kèm icon
Mình ví dụ bên dưới một button DemoDemo
Để hiển thị được button phía trên ta sử dụng code bên dưới chèn vào nơi muốn hiển thị
<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>
Và sử dụng CSS bên dưới cho button trên
a.buttonhcv { background-size: 300% 100%!important; background: linear-gradient(-225deg,#7742B2 0%,#F180FF 52%,#FD8BD9 100%); position: relative; display: inline-block; height: 45px; line-height: 45px; padding: 0 30px; font-size: 14px; color: #fff; text-align: center; text-decoration: none; border-radius: 5px; cursor: pointer; margin: 15px 10px; text-transform: uppercase; box-shadow: 4px 4px 15px rgba(0,0,0,0.1); font-weight: 500; } a.buttonhcv:hover{ opacity: .8; color: #fff; transition: .3s; } .buttonhcv:before { font-family: "Font Awesome 5 Pro","Font Awesome 5 Brands"; font-weight: 900; display: inline-block; margin: 0 5px 0 0; margin-left: -30px; } .buttonhcv.demohcv:before { content: '\f06e'; display: inline-block; margin-right: 30px; background: rgba(0,0,0,0.18); border-radius: 5px 0 0 5px; width: 45px; } a.buttonhcv.demohcv { background: linear-gradient(135deg,#ff4c2e 0%,#f9a82f 45%,#ff4c2e 77%,#f7352e 100%); }Phân tích 1 chút về đoạn CSS bên trên
- .buttonhcv: Hình dạng, màu sắc button mặc định
- .buttonhcv:before: định hình cho nơi chứa icon
- .demohcv:before: Lấy icon từ kho icon của font awesome. Ví dụ icon con mắt như button bên trên có mã là f06e. Anh em có thể lấy mã này trên trang của Awesome
- .demohcv: Màu sắc riêng cho button demo
.buttonhcv.downloadhcv:before { content: '\f06e'; display: inline-block; margin-right: 30px; background: rgba(0,0,0,0.18); border-radius: 5px 0 0 5px; width: 45px; } a.buttonhcv.downloadhcv { background: linear-gradient(-225deg,#00a26d 0%,#02ffac 52%,#039c79 100%); }Vào sử dụng đoạn code bên dưới để chèn vào nơi muốn hiển thị button
<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>Ta sẽ được
Download
Chốt lại cũng hơi loằng ngoằng đối với những bạn mới tham gia viết blog/website nhưng nếu có thắc mắc gì cứ để lại comment bên dưới, rảnh mình sẽ giúp
Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh
Chèn code: [pre]Code đã mã hóa [/pre]
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”
Chèn link: Click để chèn link