DIY Buttons Pack – Bộ buttons css3 miễn phí cho blogger

Blogger Thủ thuật

{ 0 comments }

Thêm DIY Buttons vào Blogger BlogĐối với các bạn sử dụng wordpress Thesis Framework chắc không ai lạ lẫm với bộ button khá đẹp để trang trí bài viết. Và trong một số bài viết gần đây mình cũng đã có sử dụng bộ button này cho blog của mình và cảm thấy hiệu quả khá lớn. Và đây cũng chính là lý do hôm nay mình quyết định chia sẻ bộ button này với các bạn.
Bộ DIY Buttons Pack này được thiết kế bởi Alex – Develop của kolakube.com cho Makerter Delight child theme và Thesis Framework
Trên nền tảng WordPress thì bộ buttons css3 này gồm 30 buttons tuy nhiên 6 buttons cuối cùng hoạt động với các font chữ hỗ trợ symbols – cái mà blogger không hỗ trợ cho nên trong bài viết này chỉ hướng dẫn các bạn thêm 24 buttons. Bây giờ chúng ta sẽ cùng tìm hiểu cách thêm các buttons này để trang trí thêm cho bài viết của blogger nhé!

Thêm DIY Buttons vào Blogger Blog

1. Thêm mã CSS

– Đăng nhập vào trang quản lý của blogspot, chọn theme muốn thêm bộ buttons này và nhấn chọn Mẫu (Template)—>Chỉnh sửa HTML (Edit HTML)
– Tìm đoạn code:

]]>

– Chọn một trong các bộ buttons bên dưới, lấy mã css và chèn phía trên đoạn code bạn tìm thấy ở bước trên.

2. Thêm Button vào blog

Standard Buttons

Demo:

DIY Standard Buttons

DIY Standard Buttons

CSS3 CODE CHO STANDARD BUTTONS

/* Standard Buttons */

a.standard {  border: 1px solid rgba(0, 0, 0, .2);  color: #fff;  display: inline-block;  padding: .5em .8em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 4px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  }

.standard.red {  background: #c60000;  background: linear-gradient(top, #c60000 0%, #b20000 100%);  background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));  background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.standard.orange {  background: #f99015;  background: linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));  background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%);  }

.standard.green {  background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);  }

.standard.blue {  background: #16a4c8;  background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));  background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  }

.standard.gray {  background: #c2c2c2;  background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));  background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  }

.standard.dark {  background: #464646;  background: linear-gradient(top, #464646 0%, #343434 100%);  background: -moz-linear-gradient(top, #464646 0%, #343434 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));  background: -webkit-linear-gradient(top, #464646 0%, #343434 100%);  }

a.standard:hover { color: #fff; opacity: .5 }

HTML CODE cho Standard Buttons

<a class="standard red" href="http://www.YOUR-LINK-HERE.com/">Red Button</a>

<a class="standard orange" href="http://www.YOUR-LINK-HERE.com/">Orange Button</a>

<a class="standard green" href="http://www.YOUR-LINK-HERE.com/">Green Button</a>

<a class="standard blue" href="http://www.YOUR-LINK-HERE.com/">Blue Button</a>

<a class="standard gray" href="http://www.YOUR-LINK-HERE.com/">Gray Button</a>
<a class="standard dark" href="http://www.YOUR-LINK-HERE.com/">Dark Button</a>

Arrow Buttons

Demo:

DIY Arrow Buttons

DIY Arrow Buttons

CSS3 CODE cho Arrow Buttons

/* Arrow Buttons */

a.arrow {  background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top;  border: 4px solid rgba(0, 0, 0, .1);  color: #fff;  display: inline-block;  font-size: 1.1em;  font-weight: bold;  padding: .6em 1.2em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 4px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  }

a.arrow.red { background-color: #b20000 }

a.arrow.orange { background-color: #f76c0f }

a.arrow.green { background-color: #248334 }

a.arrow.blue { background-color: #1086b6 }

a.arrow.gray { background-color: #aeaeae }

a.arrow.dark { background-color: #343434 }

a.arrow:hover { color: #fff; opacity: .5 }

HTML CODE cho Arrow Buttons

<a class="arrow red" href="http://www.YOUR-LINK-HERE.com/">Red Arrow Button</a>

<a class="arrow orange" href="http://www.YOUR-LINK-HERE.com/">Orange Arrow Button</a>

<a class="arrow green" href="http://www.YOUR-LINK-HERE.com/">Green Arrow Button</a>

<a class="arrow blue" href="http://www.YOUR-LINK-HERE.com/">Blue Arrow Button</a>

<a class="arrow gray" href="http://www.YOUR-LINK-HERE.com/">Gray Arrow Button</a>

<a class="arrow dark" href="http://www.YOUR-LINK-HERE.com/">Dark Arrow Button</a>

Bevel Buttons

Demo:

DIY Bevel Buttons

DIY Bevel Buttons

CSS3 CODE cho Bevel Buttons

/* Bevel Buttons */

a.bevel {  border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2);  border-style: solid;  border-width: 3px;  color: #fff;  display: inline-block;  padding: .5em .8em;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 7px;  -moz-border-radius: 7px;  -webkit-border-radius: 7px;  }

a.bevel.red { background: #b20000 }

a.bevel { background: #f76c0f }

a.bevel.green { background: #248334 }

a.bevel.blue { background: #1086b6 }

a.bevel.gray { background: #aeaeae }

a.bevel.dark { background: #343434 }

.bevel:hover { color: #fff; opacity: .5 }

HTML CODE cho Bevel Buttons

<a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>

<a class="bevel orange" href="http://www.YOUR-LINK-HERE.com/">Orange Bevel Button</a>

<a class="bevel green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a>

<a class="bevel blue" href="http://www.YOUR-LINK-HERE.com/">Blue Bevel Button</a>

<a class="bevel gray" href="http://www.YOUR-LINK-HERE.com/">Gray Bevel Button</a>

<a class="bevel dark" href="http://www.YOUR-LINK-HERE.com/">Dark Bevel Button</a>

Engraved Buttons

Demo:

DIY Engraved Buttons

DIY Engraved Buttons

CSS3 CODE cho Engraved Buttons

/* Engraved Buttons */

.engraved {  background: rgba(0, 0, 0, .08);  display: inline-block;  padding: 5px;  border-radius: 30px;  -moz-border-radius: 30px;  -webkit-border-radius: 30px;  }

.engraved a {  color: #fff;  border: 1px solid rgba(0, 0, 0, .3);  display: inline-block;  padding: .6em 1.2em;  position: relative;  text-decoration: none;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  border-radius: 30px;  -moz-border-radius: 30px;  -webkit-border-radius: 30px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);  }

.engraved a.red {  background: #c60000;  background: linear-gradient(top, #c60000 0%, #b20000 100%);  background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));  background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%);  }

.engraved a.orange {  background: #f99015;  background: linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));  background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%);  }

.engraved a.green {  background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);  }

.engraved a.blue {  background: #16a4c8;  background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));  background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);  }

.engraved a.gray {  background: #c2c2c2;  background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));  background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);  }

.engraved a.dark {  background: #464646;  background: linear-gradient(top, #464646 0%, #343434 100%);  background: -moz-linear-gradient(top, #464646 0%, #343434 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));  background: -webkit-linear-gradient(top, #464646 0%, #343434 100%);  }

.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }

HTML CODE cho Engraved Buttons

<span class="engraved"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Red Engraved Button</a></span>

<span class="engraved"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Orange Engraved Button</a></span>

<span class="engraved"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a></span>

<span class="engraved"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Blue Engraved Button</a></span>

<span class="engraved"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Gray Engraved Button</a></span>

<span class="engraved"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Dark Engraved Button</a></span>

Trên đây là bộ DIY Buttons Pack mà mình đang áp dụng cho blog. Ngoài ra các bạn cũng có thể xem demo ở đây hoặc  các bạn có thể tìm hiểu thêm cách thêm các icon vào bài viết sử dụng font awesome.
Bộ Buttons này được thiết kế bởi Alex cho Thesis Framework và được chuyển sang cho blogger bởi  Chandeep J

Góp ý cho Tô Triều