Note Thông báo: Từ ngày 25/05/2021 hệ thống ngừng hoạt động, mọi vấn đề hay thắc mắc trên đây sẽ không được giải quyết. Hãy truy cập Code Pro để được hỗ trợ!

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

Loading...
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 !
  1. Đẹp, mới lạ, chất,... Rất sáng tạo đó anh!

    Trả lờiXóa
  2. Biết rồi cơ mà lúc trc a không thấy à?

    Trả lờiXóa
  3. Em.không rõ khi em vài thì thấy bị rồi :v

    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
  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. 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. 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. đẹp trai hơn các bạn nhiều :v

      Xóa
    5. Thích thì a thử show mặt a lên xem :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. hình như tiểu bảo cũng lớn tuổi hơn m đó Duy :v

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

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

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

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

      Xóa
    6. 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
    7. 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. Đú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
    2. Duy xin sđt vs địa chỉ có gì ib lquen :v

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

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

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

      Xóa
    6. 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
    7. 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