Với nhu cầu làm đẹp và sinh động thêm cho bài viết, việc sử dụng các button sẽ đặc biệt tạo điểm nhấn và mang lại cho bài viết của bạn nét tươi mới hơn.
Và hôm nay mình sẽ chia sẻ với bạn một mẫu button khá đẹp và bắt mắt. Mẫu button này được tạo ra bởi Martin Angelov và chia sẻ ở http://tutorialzine.com/
Mong rằng điều thú vị nho nhỏ này sẽ giúp ích cho bạn!
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.button{font:15px Calibri,Arial,sans-serif;text-shadow:1px 1px 0 rgba(255,255,255,0.4);text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat;background-position:bottom left;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png');background-position:bottom left,top right,0 0,0 0;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset;-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}
.button:hover{background-position:top left;background-position:top left,bottom right,0 0,0 0}
.button:active{bottom:-1px}
.button.big{font-size:30px}
.button.medium{font-size:18px}
.button.small{font-size:13px}
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em}
.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important;background-color:#48b5f2;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}
.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}
.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}
.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0;background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),url('https://lh6.googleusercontent.com/-6nfe9MgFPIQ/UQK4RSkK7lI/AAAAAAAABwM/pHNFlxAIO68/s0/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}
Lưu ý: Tùy nhu cầu sử dụng hãy chọn cho mình đoạn mã css button phù hợp với bạn nhé!
Bước 2: Khi cần sử dụng button hãy chỉnh sửa bài đăng trong chế độ HTML và sử dụng cấu trúc sau cho button.
-Với button lớn
<a class='button big blue' href='#'>Big Button</a>
-Với button trung bình
<a class='button blue medium' href='#'>Medium Button</a>
-Với button nhỏ
<a class='button small blue' href='#'>Small Button</a>
-Với button bo tròn
<a class='button small blue rounded' href='#'>Rounded</a>
Mong rằng bạn sẽ có những bài viết mới sinh động hơn nhờ sử dụng button!
25 nhận xét
Chúc mừng template mới ::h
Nhân tiện cho ra bài viết mới đi bạn ::j
::n template sẽ còn mới nữa, đang nghiên cứu thủ thuật gán ribbon theo nhãn cho bài đăng.
He thế tầm chiều ghé thăm nhé tí viết chia sẻ cái style dang sách nhãn như ở cuối tem của mình đó
Cái đấy đẹp nhưng theo mình nên bỏ thuộc tính border: 1px solid; của .tags span để khi rê chuột đến nó mở ra số bài viết thì không nhìn thấy một gạch ở trước số
::o Nếu bỏ cái đấy thì nhìn nó đểu lắm, không biết tả thế nào. Nôm na là có thêm border nó mới thêm đc ít thịt không thì nhìn cụt ngủn. Chắc là chỉnh màu cho giống màu nền.
He mà cái đấy tùy thẩm mỹ mỗi người cho họ tùy chỉnh
ừ cho border giống màu nền là được, thế mà mình không nghĩ ra =))
::j à gửi code Top comments cho mình đi, thêm vào chứ để trang chủ trống vắng quá
Hơ, mình cũng sử dụng code của bác Tiến Nguyễn mà ::b
Chỉ thay style với thêm cái thuộc tính title đẹp của cậu thôi
::b sao paste y nguyên mà không thấy gì, view sound code của cậu thì lại là top comments của bên cậu.
mà wtf code lấy của bác Tien 1 đống sao vuông gì chứ có như của cậu đâu nhỉ
Bây giờ button có hình ảnh là đã không thích lắm rồi ::h
::k cuối cùng là có động chạm gì vào code không. Bê nguyên bản chính mà ko được
Thế thử hỏi xem sao. Mình dùng bản đấy mà, có sửa thì chỉ sửa cái style thôi chứ phần mã hóa động vào sai một dấu phẩy cũng ko hoạt động mà ::n
Blog đẹp hơn nữa rồi!
Temp mới đỉnh quá ! Rất gọn gàng !
button này có hiện thị ngoài bài đăng trang chủ được không nhỉ?
không bạn à!
vâng!
Em thấy có nhiều template ở phần trang chủ bài đăng của họ có hiện thêm chữ Download và Demo rất đẹp bên cạnh ảnh thumbnail. Anh xem ảnh bên dưới nhé.
https://lh3.googleusercontent.com/-Vz6qNx8xroI/UQT4aIp-J2I/AAAAAAAADKs/gz9QfPJsGgs/s500/1.jpg
Anh có thể chỉ cách làm cho em với được không?
DEMO: templates.linhdungvn.com
cái trong ảnh là dạng button đúng không nhỉ????
Bạn muốn như mẫu này http://themetop-besttheme.blogspot.in/
Nó không phải là button mà là sử dụng hình ảnh thôi
cái ảnh Download và Demo là cố định như vậy ak. Có thể nào thay = 2Ảnh bất kỳ giữ nguyên ở đó, mà thay đổi được chữ không?
VD: 2 ảnh vẫn cố định ở đó, mà chữ có thể là "xem tiếp" và "v.v.." hoặc có thể là chữ mà do mình tự thay đổi khi đăng bài được không?
::m thay cái ảnh đi là xong
ý em là. Chỉ cần trong phần bài đăng, mình ghi nội dung gì thì nội dung đó sẽ hiện thị nằm trong ảnh đó luôn
Tốt nhất bạn nên download cái theme đó về và tự trải nghiệm sẽ hiểu nhiều hơn là hỏi mình. Ok!
Đã nói là ảnh thì bạn tự hiểu cái ảnh đó đã bao gồm nội dung bạn muốn ở trên nó luôn rồi - nói cho nhanh là bạn dùng bất kì 1 chương trình chỉnh sửa ảnh nào đó ghi chữ lên.
Thân!
Vâng. Cảm ơn nhiều ::d
Ví dụ css của bạn như sau
ask{background-image:url(https://trollvlhcv.googlecode.com/svn/trunk/hd.png);background-color:#F7F7F7;background-repeat:no-repeat;display:block;padding-top:5px;padding-left:10px;border:1px #D6D6D6 solid;color:#000;overflow:auto;word-wrap:break-word}
#c9cfdb solid;border-radius:4px;overflow:auto;word-wrap:break-word}
Và nội dung bạn viết
<ask>Nội Dung</ask>
Sẽ được kết quả như widget Yêu Cầu - Hỏi - Đáp như trên <a href="http://www.trollvl.com>blog của mình</a>