Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

Tạo nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp cho blogspot

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.
nút demo hiệu ứng hover màu sắc tuyệt đẹp



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:

.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>
demotkn ("văn bản hiển thị", "url demo, download", "title url");
</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.
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>
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>
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à:
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ình luận

  1. Button ngon :)) Mà có JS không thích

    Trả lờiXóa
    Trả lời
    1. đọc kĩ bài viết đi man :v

      Xóa
    2. Có gì đâu em chỉ nói là Không thích JS thôi mà :v

      Xóa
    3. Nó có cái gì đó nó không thiện cảm :v 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 :v

      Xóa
    4. Không hiểu :v Đang tính học mà trên yt họ đây không hiểu gì :)

      Xóa
    5. cần ko a sennd giáo trình qua cho mak học

      Xóa
    6. Có chứ được thì tốt qua em cx muốn học JS lắm :))

      Xóa
    7. Tối đi học cmnr mai send cx đc :v

      Xóa
  2. Lỗi menu trên Mobile kìa a :))
    [img]https://i.imgur.com/t80zLe3.png[/img]

    Trả lờiXóa
  3. Đẹp, mới lạ, chất,... Rất sáng tạo đó anh!

    Trả lờiXóa
  4. Công nhận cái gì của anh đều khó xài thật :v K thích js tý nào cả a ạ :3

    Trả lờiXóa
  5. Trả lời
    1. Meto JS đẹp cơ mà méo hiểu gì :v

      Xóa
    2. đú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óa
    3. Không biết mới ghét :v

      Xóa
  6. Khanh đâu rồi mà không thấy Rep cmt nhỉ?

    Trả lờiXóa
  7. A tưởng cái ủng hộ là trang donate cơ.

    Trả lờiXóa
  8. Đẹp. Mà button có js :(

    Trả lờiXóa
    Trả lời
    1. em nghĩ bác nên đọc hết bài vik

      Xóa
    2. JS là để thay cho mấy cái thẻ SVG... Đó bác không anh hưởng đến speed gì đâu...

      Xóa
    3. Hay gì ta nói xàm mà chứ có biết gì đâu :v

      Xóa
    4. Nó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 :v

      Xóa
    5. ừ đúng r :v bài ghi rõ ra mak :v 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óa
    6. Bài ghĩ rõ chẳng nhẽ Em lại không nhìn thấy :v

      Xóa
    7. Tâ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 :v

      Xóa
  9. Trả lời
    1. Duy bị bệnh dow à hay đẹp thì tui khen tuyệt vời vậy thôi :D

      Xóa
    2. hiểu đơn giản là NGu :3

      Xóa
    3. Bệ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
    4. :v show mặt ae xem Duy êy :v

      Xóa
    5. Thật là bệnh dow bị thế á -_-

      Xóa
    6. Mà em này :v
      [img]http://webdata.vcmedia.vn/webdata/100/dae54eanh201jpg1370951893.jpg[/img]

      Xóa
    7. đẹp trai hơn các bạn nhiều :v

      Xóa
    8. Thích thì a thử show mặt a lên xem :v

      Xóa
    9. Tui max đẹp trai rồi :)

      Xóa
    10. Đùa không giám show mặt :v

      Xóa
  10. Trả lời
    1. nó có ^^ đâu mà bắt trước ...

      Xóa
    2. Nói với thằng Tiểu Bảo đó :v

      Xóa
    3. mà biết concac là gì không?

      Xóa
    4. hình như tiểu bảo cũng lớn tuổi hơn m đó Duy :v

      Xóa
    5. Tiều Bảo sn bao nhiêu vậy ?

      Xóa
    6. 2k2 á thế lớn hơn rồi :v

      Xóa
    7. Duy tưởng mình không biết à ? khinh nhau quá r đó concac là "con cá (c)" nhé :)

      Xóa
    8. Khinh nhau? e đâu khinh a...

      Xóa
    9. vaiz lz gắt? vaiz lz là cai gi vậy?

      Xóa
    10. Vãi lợn :v Lợn cx có vãi

      Xóa
    11. Có dấu ? Đâu mà hỏi... Nói xàm vvj

      Xóa
  11. Cái nút Demo rất bắt mắt người xem để tuần này test :v

    Trả lờiXóa
    Trả lời
    1. Đẹp thật, chào starquoc :v

      Xóa
    2. Chào ông có gì liên hệ qua Gmail nhé ngày mai là tui comeback lại rồi

      Xóa
    3. Quốc làm.gì mà comeback vậy ?

      Xóa
    4. :v comeback blog hay fb gì ấy

      Xóa
    5. Quốc lớn tuổi hơn á?

      Xóa
    6. tại anh ý không giới thiệu ib toàn gọi ông với tôi thôi à :D

      Xóa
    7. Khanh lúc trc cũng v :v h bik tuổi r gọi anh đi :v

      Xóa
    8. Anh Quốc có gì em xin lỗi nhé bấy lâu không biết toàn xưng tôi :v

      Xóa
    9. Không sao đâu em :v

      Xóa
    10. Hihi bấy lâu em không biết :v

      Xóa
  12. Button đẹp :c bác Duy check ib em phát nhé.

    Trả lờiXóa
  13. Trả lời
    1. Gái á? Ngọc Tính là gái :v

      Xóa
    2. thì thấy Ngọc ngọc j kìa :v

      Xóa
    3. Đú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 đó :V

      Xóa
    4. Duy xin sđt vs địa chỉ có gì ib lquen :v

      Xóa
    5. Đừng kêu bằng anh nữa tui ngại lắm :)

      Xóa
    6. Lớn hơn không kêu anh thì kêu gì?

      Xóa
    7. Xuân hô bình thường thôi :) còn không thì kêu bằng cha cũng đc

      Xóa
    8. Mà tiện thể duy ghé blog mình xem nha mới có bài mới
      fb minh day
      www.facebook.com/TieuBao.No01

      Xóa
    9. Lớn tuổi hơn thì gọi là anh là đúng rồi còn gọi khá nó ngượng lắm :v

      Xóa
  14. Ra 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 :v

    Trả lờiXóa
  15. code này không hiển thị trên mobile nhé bạn, minh dùng điện thoại thì không thấy hiện ra để tải link về

    Trả lờiXóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm