Button tuyệt đẹp chỉ bằng html và css

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

Chào các bạn, đã lâu mình không có viết bài rồi nhỉ, cũng tại mình khá bận về việc học (sắp thi học kỳ I đó mấy man) nên mình không có thời gian. Để bù đắp thì hôm nay mình sẽ chia sẻ cho các bạn một thủ thuật hay hơn nữa nè!
Mình sẽ share cho các bạn một loại button khá là đẹp mà mình cũng vừa mới nghịch ra nhé.

Bước 1: Thêm đoạn css này vào thẻ style

buttonsb{float:left;width:100%;margin:10px 0 15px 0}
#buttonsb .btn{background:#e70000;-webkit-box-shadow:0 2px 5px rgba(52, 152, 219, 0.15);box-shadow:0 2px 5px rgba(52, 152, 219, 0.15);float:left;width:auto;margin:0 1.5%;padding:8px 25px;text-align:center;border-radius:20px;color:#fff;text-transform:capitalize;display:inline-block;box-sizing:border-box;text-transform:uppercase}
#buttonsb .btn:nth-child(1){margin-left:0!important}
#buttonsb .btn:nth-child(n){margin-right:0!important}
#buttonsb br{display:none!important}
#buttonsb a.btn:before{content:'';margin-right:5px;font-family:"Font Awesome 5 Pro"}
#buttonsb a.btn.btn-lh:before{content:'\f658'}
#buttonsb a.btn.btn-download:before{content:'\f381'}
#buttonsb a.btn.btn-read:before{content:'\f109'}
#buttonsb a.btn.btn-lam:before{content:'\f1aa'}
#buttonsb a.btn.btn-visit:before{content:'\f135'}
.buttonblog{float:left;width:100%;box-sizing:border-box}

Bước 2: Thêm đoạn html này vào nơi bạn muốn đặt button

<div id="buttonsb">
<a class="btn btn-download" href="https://www.blogger.com/null">Button Download</a>
<a class="btn btn-read" href="https://www.blogger.com/null">Button Demo</a></div>

Các icon fontawesome được sử dụng là font v5 pro, các bạn có thể thay bằng phien bản mình muốn nhé.
Chúc các bạn thành công!

Designed code by Tôi Share

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin