D

Code Demo và Download CSS3 Button cho Blogger đẹp tuyệt

Hôm nay mình sẽ chia sẽ đến các bạn bộ code dùng để làm button bằng CSS3 tuyệt đẹp. Khi bạn đưa trỏ vào button thì sẽ thấy hiệu ứng rất hay....

Mọi bài đăng được viết bởi tác giả của blog, vui lòng ghi nguồn ghi copy bài đăng từ trang này
Hôm nay mình sẽ chia sẽ đến các bạn bộ code dùng để làm button bằng CSS3 tuyệt đẹp. Khi bạn đưa trỏ vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích.

Bước 1: Bạn đăng nhập vào Blogger ->> Chủ đề ->> Chỉnh sửa html
Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>
Bước 3: Thêm đoạn CSS này vào thẻ <style>
a:active{position:relative;top:1px;left:1px}
#all-button{text-align:center}
#all-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -4px rgba(0,0,0,0.15);box-shadow:inset 0 -4px rgba(0,0,0,0.15);color:#fff;max-width:220px;line-height:30px;font-size:16px;text-transform: uppercase;margin:10px}
#all-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.demo-button:before{content:'\f1d9';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.download-button:before{content:'\f019';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.buy-button:before{content:'\f07a';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.blue{background:#3498db;}
.green{background:#2ecc71}
.red{background:#e74c3c}
.orange{background:#e8930c}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}
Bước 4: Thêm button bằng đoạn code bên dưới
<div id="all-button">
<a href="" class="green demo-button" target="_blank" rel="nofollow">Xem mẫu</a><a href="" class="orange download-button" target="_blank" rel="nofollow">Tải về</a><a href="" class="blue buy-button" target="_blank" rel="nofollow">Mua ngay</a></div>

Code Demo và Download CSS3 Button cho Blogger đẹp tuyệt Reviewed by Dii Max IT on tháng 2 13, 2017 Rating: 5

Không có nhận xét nào:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

Phát Triển BởiDii Max | Facebook

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Dii Max IT. Được tạo bởi Blogger.