TẠO NÚT DEMO - DOWNLOAD VỚI HIỆU ỨNG HOVER MÀU SẮC TUYỆT ĐẸP CHO BLOGSPOT

Xuất bản: lúc 17:42 ngày 26/01/2018
Với nhiều nút Demo, download được chia sẻ ở nhiều trang web thì hầu hết đều để nền cũng như hiệu ứng Hover khá quen thuộc. Chính vì thế, để tạo sự mới lạ, sự thu hút và tăng tính chuyên nghiệp cho blogspot thì hôm nay mình sẽ chia sẻ cho các bạn nút Demo - Download với hiệu ứng hover kèm theo màu sắc hài hòa tuyệt đẹp cho Blogspot ! Demo các bạn có thể xem ngay bên dưới.
Các bước thực hiện
Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style> của Blogspot:
Bước 2: Chèn đoạn JS sau vào phía trên thẻ </head>:
Bước 3: Vì nó có nhiều hiệu ứng CSS nên khi chèn sẽ cần rất nhiều thẻ như SVG, RECT... Chính vì vậy mình đã dùng JS rút gọn như ở bước 2. Ở bước này là bước chèn vào nơi hiển thị. Khi chèn vào bài viết hay 1 trang, các bạn chuyển sang chế độ HTML rồi chèn đoạn JS sau vào nơi muốn hiển thị Button:
Url Demo, download là liên kết tới 1 Demo hay Download. VD: http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html
title url là tiêu đề liên kết, bạn có thể không cần thêm nó !
VD CODE:
VD:
<script>
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html");
</script>
Với một Button với nhiều hiệu ứng màu sắc hover như vậy nhưng khi chèn vào blog thì rất nhỏ gọn đúng không nào ! Mặc dù là JS nhưng nó KHÔNG hề ảnh hưởng đến tốc độ tải trang nhé !
Hi vọng với nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp này sẽ giúp blog các bạn đẹp hơn như cái nút :v cũng như tăng tính chuyên nghiệp hơn !
Chúc các bạn thành công !
Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style> của Blogspot:
.btn_tkn {
transition: .4s;
position: relative;
display: inline-block;
width: 160px;
font-size: 1em;
font-weight: bold;
line-height: 45px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
text-decoration:none!important;
font-family: 'Roboto', sans-serif;
font-weight:900;
font-size:15px;
letter-spacing: 0.045em;
}
.btn_tkn svg {
position: absolute;
top: 0;
left: 0;
}
.btn_tkn svg rect {
//stroke: #EC0033;
stroke-width: 2;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.btn_tkn span{
background: rgb(255,130,130);
background: -moz-linear-gradient(left, rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
background: linear-gradient(to right, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn_tkn:hover svg rect {
stroke-width: 1;
stroke-dasharray: 123, 660;
stroke-dashoffset: 607;
}
.btn_tkn:hover {letter-spacing: 0.3em}
}
Bước 2: Chèn đoạn JS sau vào phía trên thẻ </head>:
<script>
function demotkn (textdemo, linkdemo, titlelinkdemo) {
document.write ("<center><a href='" + linkdemo + "' title='" + titlelinkdemo + "' target='_blank' class='btn_tkn'><svg width='160' height='45'><defs><linearGradient id='grad1'><stop offset='0%' stop-color='#FF8282'/><stop offset='100%' stop-color='#E178ED' /></linearGradient></defs><rect class='vxt_tkn_contetw3' x='5' y='5' rx='13' fill='none' stroke='url(#grad1)' width='150' height='35'></rect></svg><span>" + textdemo + "</span></a></center>");
}
</script>
Bước 3: Vì nó có nhiều hiệu ứng CSS nên khi chèn sẽ cần rất nhiều thẻ như SVG, RECT... Chính vì vậy mình đã dùng JS rút gọn như ở bước 2. Ở bước này là bước chèn vào nơi hiển thị. Khi chèn vào bài viết hay 1 trang, các bạn chuyển sang chế độ HTML rồi chèn đoạn JS sau vào nơi muốn hiển thị Button:
<script>Văn bản hiển thị đơn giản là text sẽ hiển thị của button, ví dụ: XEM DEMO chẳng hạn.
demotkn ("văn bản hiển thị", "url demo, download", "title url");
</script>
Url Demo, download là liên kết tới 1 Demo hay Download. VD: http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html
title url là tiêu đề liên kết, bạn có thể không cần thêm nó !
VD CODE:
<script>Như đã nói thì đối với những bạn không quan tâm SEO thì có thể bỏ title URL, lúc đó code sẽ là:
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html", "Tạo nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp cho blogspot");
</script>
VD:
<script>
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html");
</script>
Với một Button với nhiều hiệu ứng màu sắc hover như vậy nhưng khi chèn vào blog thì rất nhỏ gọn đúng không nào ! Mặc dù là JS nhưng nó KHÔNG hề ảnh hưởng đến tốc độ tải trang nhé !
Hi vọng với nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp này sẽ giúp blog các bạn đẹp hơn như cái nút :v cũng như tăng tính chuyên nghiệp hơn !
Chúc các bạn thành công !
đẹp quá
Trả lờiXóaĐẹp đó bn
Trả lờiXóathanks
XóaRa bài mới thôi nào e, copy paste các bài hay cũng đc mà. Giờ a k làm thế là hết sạch ý tưởng rồi, khiếp người, 1 bài toàn cứ trên dưới 100 comments
Trả lờiXóavâng e sẽ cố gắng. trc h bỏ rơi linkthuthuat nên mấy hôm nay phải chăm lại nó
XóaOk e
XóaA Khanh đang res lại theme LTT á?
Xóaừ a res xong r
XóaRes cái nhìn đẹp hơn hẳn chứ lúc chưa Res vào nhìn loạn mắt chỉ muốn out
Xóahaha
XóaEm.nói đúng không
Xóachuẩn
XóaHaha best
XóaBài này chắc nhiều cmt nhất
XóaLượng cmt quá khủng
Xóamình thấy bài kia hơn 200 cmt kìa
XóaChất
Trả lờiXóathanks gái
XóaGái á? Ngọc Tính là gái
Xóathì thấy Ngọc ngọc j kìa
XóaĐúng rồi tính là gái đó, tên thật Nguyễn Trần Tính Ngọc ở gần nhà mình tên hơi kì tính là gái đó
XóaDuy xin sđt vs địa chỉ có gì ib lquen
XóaXin tính đó
XóaTưởng anh có?
XóaĐừng kêu bằng anh nữa tui ngại lắm
XóaLớn hơn không kêu anh thì kêu gì?
XóaXuân hô bình thường thôi
còn không thì kêu bằng cha cũng đc
XóaMà tiện thể duy ghé blog mình xem nha mới có bài mới
Xóafb minh day
www.facebook.com/TieuBao.No01
Ừ em sẽ ghé qua
XóaLớn tuổi hơn thì gọi là anh là đúng rồi còn gọi khá nó ngượng lắm
XóaỪ
XóaButton đẹp :c bác Duy check ib em phát nhé.
Trả lờiXóathanks bn :3
XóaCó gì hỏi luôn chứ không thích inbox riêng tư cho lắm
XóaCái nút Demo rất bắt mắt người xem để tuần này test
Trả lờiXóahjhj
XóaĐẹp thật, chào starquoc
XóaChào ông có gì liên hệ qua Gmail nhé ngày mai là tui comeback lại rồi
XóaOkay ông huhu :<
XóaQuốc làm.gì mà comeback vậy ?
Xóa
comeback blog hay fb gì ấy
Xóalớn tuổi hơn m đó Duy
XóaQuốc lớn tuổi hơn á?
Xóahọc cao đẳng
Xóatại anh ý không giới thiệu ib toàn gọi ông với tôi thôi à
XóaKhanh lúc trc cũng v
h bik tuổi r gọi anh đi 
XóaỪ gọi là anh thôi
XóaAnh Quốc có gì em xin lỗi nhé bấy lâu không biết toàn xưng tôi
XóaKhông sao đâu em
XóaHihi bấy lâu em không biết
XóaHihi ừ em
XóaMong anh bỏ qua
XóaTuyệt vời
Trả lờiXóaBắc chước tui à -_-
Xóathanks
Xóanó có ^^ đâu mà bắt trước ...
Xóahaha
XóaHaha
XóaHaha concac OK
)))
Xóam ns ai v
Xóam ns ai v Duy
XóaDuy vô học
Xóaquên là đã đc học
XóaNói với thằng Tiểu Bảo đó
XóaTớ có học nhá
Xóamà biết concac là gì không?
Xóahình như tiểu bảo cũng lớn tuổi hơn m đó Duy
XóaTiều Bảo sn bao nhiêu vậy ?
Xóahình như 2k2
Xóa2k2 á thế lớn hơn rồi
XóaMà a Khanh snbn vậy?
Xóa2k3
XóaDuy tưởng mình không biết à ? khinh nhau quá r đó concac là "con cá (c)" nhé
XóaKhinh nhau? e đâu khinh a...
XóaDuy 2k5 nói thật
XóaHaha vaiz lz gắt
Xóavaiz lz gắt? vaiz lz là cai gi vậy?
XóaLà v a i l o n đó
XóaV a i l o n đó? Là gì?
XóaVãi lợn
XóaVãi lợn
Lợn cx có vãi
XóaHỏi xàm
XóaCó dấu ? Đâu mà hỏi... Nói xàm vvj
XóaTuyệt vời ^^
Trả lờiXóaTuyệt vời là clgt?
Xóathanks
XóaDuy bị bệnh dow à hay đẹp thì tui khen tuyệt vời vậy thôi
Xóadow là bệnh gì thế?
Xóahiểu đơn giản là NGu :3
Xóadow mà là Ngu á
XóaBệnh dow là bệnh đầu óc không phát triển bình thường khuôn mặt những ng bị bệnh dow giống nhau đó
Xóa
show mặt ae xem Duy êy 
XóaThật là bệnh dow bị thế á -_-
Xóa.
XóaHaha
Xóađẹp trai hơn các bạn nhiều
XóaLệ rơi bản 2.0
XóaĐẹp hơn a đó
XóaThích thì a thử show mặt a lên xem
XóaTui max đẹp trai rồi
XóaCỡ lệ rơi bản v3
XóaShow lên đi
XóaVãi lợn đó đjt m3
XóaĐùa không giám show mặt
XóaHaha
XóaHa ha
XóaTuyệt vời
Trả lờiXóathanks a ạ
XóaẸp óa ang ùng è
Trả lờiXóaBác nói clgt?
XóaKhanh đẹp trai quá. đang dùng nè
XóaSai cmnr Đẹp quá đang dùng nè Duy Handsome ạ
XóaXAMLONISREAL
XóaÔi tên cầu thủ kg biết ai chế hay phết. Mà dịch sai hết r @-@
Xóa@@ tên gốc là gì nhỉ
XóaHình như thay L thành R hay sao ý
Xóaxàm
Xóa.
XóaVch xàm
Xàm vc
XóaLại còn ( . ) Cái nữa
Xóako bik ns j
XóaCạn lời
Xóafixed !
Trả lờiXóaĐẹp. Mà button có js
Trả lờiXóaem nghĩ bác nên đọc hết bài vik
XóaJS là để thay cho mấy cái thẻ SVG... Đó bác không anh hưởng đến speed gì đâu...
Xóađù man hay quá Duy
XóaHay gì ta nói xàm mà chứ có biết gì đâu
Xóacứ tưởng nó hiểu ...
XóaNó hiểu là ai?
Xóamày đó Duy =.=
XóaVch Duy hiểu mà
Xóasao bảo ko bik trên kìa
XóaNói thôi chứ trong đầu vẫn hiểu cái đó là thay cho thẻ khác vì bài viết có ghi
Xóaừ đúng r
bài ghi rõ ra mak
nhiều ng cứ cop code r paste hay nhiều ng cứ lướt qua thấy js là ko thích vì nặng chứ có đọc đâu =)
XóaBài ghĩ rõ chẳng nhẽ Em lại không nhìn thấy
XóaTâm lý của tất cả là cứ thế cop Code về mà chỉ nhìn code không nhìn bài viết
Xóa
Xóa
XóaA tưởng cái ủng hộ là trang donate cơ.
Trả lờiXóa
Xóa
sao đặt link ads civi?
Xóaủng hộ
đặt tạm v
nhác tạo cái unghotoi
XóaTạở cái mega ấy cho dễ a
Xóako thích mega
XóaMega rút card or ATM cho dễ
Xóako bik xài nên ko thích =)
XóaHaha giả thiết giống Duy
Xóabutton hay phết
Trả lờiXóathanks a ạ
XóaKhanh đâu rồi mà không thấy Rep cmt nhỉ?
Trả lờiXóaquẩy từ hôm qua =)
XóaĐi cổ vũ á
Xóaừ
XóaThế chắc Hôm qua đi đón U23 VN rồi
Xóacó chứ
cơ mak 2h ms tới HN. đông vl dã man
XóaXem trên TV đông nghịt người
mà tới tận 7giờ mới về đến Lăng Bác 
Xóahọp xog ms về
XóaTại đông quá lên cũng không đi đc nhanh lên mới chậm
XóaMéo thích JS
Trả lờiXóaMeto JS đẹp cơ mà méo hiểu gì
Xóađúng toàn mấy thánh éo bik js là ko thích js. HD kĩ thế kia, tối ưu thế kia. ko thích js thì xài amp đi =)
XóaKhông biết mới ghét
XóaCông nhận cái gì của anh đều khó xài thật
K thích js tý nào cả a ạ :3
Trả lờiXóađã đọc bài viết chưa e
XóaTính đọc bài không kĩ
XóaHaha choáng @@!
XóaHaha ra nút button hả
Trả lờiXóa
XóaEm.không rõ khi em vài thì thấy bị rồi
Trả lờiXóams bị mak
Trả lờiXóaBiết rồi cơ mà lúc trc a không thấy à?
Trả lờiXóađã bảo là tối fix. ko hiểu hả
Trả lờiXóaLỗi đó mà không thấy á
Trả lờiXóauk tối fix
Trả lờiXóaĐẹp, mới lạ, chất,... Rất sáng tạo đó anh!
Trả lờiXóathannks e
XóaChất quá em
Trả lờiXóaCảm ơn anh
(nói hộ Khanh)
Xóathanks a Đức nhé
Xóap/s Duy: thanks :3
Không có gì em
(Nói hộ Đức)
XóaP/s Khanh: KCJ a
xàm vl. cút đi @@
XóaDuma câu quen thuộc
XóaButton ngon
Mà có JS không thích
Trả lờiXóađọc kĩ bài viết đi man
XóaCó gì đâu em chỉ nói là Không thích JS thôi mà
Xóavì sao ko thích
XóaNó có cái gì đó nó không thiện cảm
Với cả em méo biết gù về JS
Chưa học cái JS với cả chưa biết học từ đâu 
Xóakhông hiểu thì thôi
XóaKhông hiểu
Đang tính học mà trên yt họ đây không hiểu gì 
Xóacần ko a sennd giáo trình qua cho mak học
XóaCó chứ được thì tốt qua em cx muốn học JS lắm
Xóatối send cho
XóaTối đi học cmnr mai send cx đc
Xóa
Xóacmt đầu :3
Trả lờiXóaVãi khánh :3
Xóa