Chèn ảnh Vào Button Html - VCCIdata

Để 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

Bạn đang xem:

Xem thêm:

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ẻ

Tạo button kèm icon

Mình ví dụ bên dưới một button Demo DemoĐể 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ịDemoVà 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 Ví dụ ta sẽ thêm đoạn code sau vào CSS .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ị buttonDownloadTa sẽ đượcDownload 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

XEM THÊM: Phần mềm quản lý hình ảnh

Xem thêm:

Bạn đang xem bài viết “Thêm button có icon cho website sử dụng font awesome” tại chuyên mục: Blogspot , CSS , HTML , Website

Chuyên mục: