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 !
Tác giả: Lê ANh Đức

Tôi là Đức, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Admin của trang web này đã qua đời ! Hãy để lại một comment để thể hiện lòng biết ơn, tiếc thương đối với người đã mất. Chúng tôi hy vọng những người yêu quý Lê Anh Đức sẽ cảm thấy được an ủi khi truy cập trang web này, cùng nhớ lại và tôn vinh cuộc đời của anh ấy. Cảm ơn rất nhiều !!!
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    199 nhận xét:

    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. Trả lời
      1. Cảm ơn anh :v (nói hộ Khanh)

        Xóa
      2. thanks a Đức nhé <3
        p/s Duy: thanks :3

        Xóa
      3. Không có gì em :)) (Nói hộ Đức)
        P/s Khanh: KCJ a :v

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

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

      Trả lờiXóa
    5. 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
    6. 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
    7. Khanh đâu rồi mà không thấy Rep cmt nhỉ?

      Trả lờiXóa
      Trả lời
      1. Thế chắc Hôm qua đi đón U23 VN rồi :))

        Xóa
      2. có chứ :v cơ mak 2h ms tới HN. đông vl dã man

        Xóa
      3. Xem trên TV đông nghịt người :v mà tới tận 7giờ mới về đến Lăng Bác :))

        Xóa
      4. Tại đông quá lên cũng không đi đc nhanh lên mới chậm :v

        Xóa
    8. A tưởng cái ủng hộ là trang donate cơ.

      Trả lờiXóa
    9. 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
    10. 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. 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
      3. Thật là bệnh dow bị thế á -_-

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

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

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

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

        Xóa
    11. 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. vaiz lz gắt? vaiz lz là cai gi vậy?

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

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

        Xóa
    12. 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. tại anh ý không giới thiệu ib toàn gọi ông với tôi thôi à :D

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

        Xóa
      7. 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
      8. Hihi bấy lâu em không biết :v

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

      Trả lờiXóa
      Trả lời
      1. Có gì hỏi luôn chứ không thích inbox riêng tư cho lắm :v

        Xóa
    14. 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
    15. 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
      Trả lời
      1. vâ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óa
      2. A Khanh đang res lại theme LTT á?

        Xóa
      3. Res 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óa
      4. Bài này chắc nhiều cmt nhất

        Xóa
      5. mình thấy bài kia hơn 200 cmt kìa

        Xóa

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !