Code Demo và Download CSS3 Button cho Blogger đẹp tuyệt
admin 5 năm trước

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

Hôm nay, mình chia sẻ đến các bạn bộ code dùng để làm button bằng CSS3 đẹp tuyệt. Khi bạn đưa trỏ chuột 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. Nào ta cùng xem và thử nghiệm bộ button tuyệt đẹp này nhé.

Bước 1: Bạn đăng nhập vào Blogger –> Theme –> Edit 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ạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome: http://fontawesome.io/icons/
– Mình đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
– Và thay thế tên demo-button, download-button,buy-button bằng tên mà bạn thích khi bạn thêm icon vào.
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>

Xem mẫu

13 lượt xem | 1 Bình luận
Hiện tại tác giả vẫn chưa cập nhật chia sẻ của mình

Bình luận gần đây

https://allfreevn.com
bùi thủy 2 tuần trước
sao giờ em không tải ảnh nhỏ được ạ...
https://allfreevn.com
Phuongnguyen 2 tháng trước
Rất tuyệt...
https://allfreevn.com
dfafa 2 tháng trước
rất tốt...
https://allfreevn.com
mina 2 tháng trước
rất tốt....
https://allfreevn.com
Kim Yến 3 tháng trước
Cảm ơn bạn đã chia sẻ...
https://allfreevn.com
Kim Yến 3 tháng trước
HAy lắm bạn ơi...
https://allfreevn.com
Kim Yến 4 tháng trước
hay quá bạn ơ...
https://allfreevn.com
Kim Yến 4 tháng trước
Cảm ơn bạn đã chia sẻ nhé...
https://allfreevn.com
Kim Yến 5 tháng trước
Cảm ơn bạn rất nhiều...
https://allfreevn.com
Akuna 9 tháng trước
ủa, không down được, yêu cầu quyền truy cập là sao ta? Share file mà không để public. Kì ta...