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

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

Blogger Tips

https://severphim.blogspot.com/2019/05/button-tuyet-ep-chi-bang-html-va-css.html

Previous Post

Next Post

Top Post