Share Code Tạo Nút Button Đẹp Cho Blogspot Version 3.0

Tạo Button Đẹp Cho Blog Version 3.0

H ello tháng 8 và xin chào các bạn. Mấy bài lần trước share code tại button thấy mọi người khá ủng hộ nên đầu tháng làm tý button hoa lá cành cho cả tháng bùng nổ nhỉ.

Share Code Tạo Button Cho Blogspot Version 3.0

Hôm nay mình sẽ mang đến cho các bạn một vài chiếc button với hiệu ứng hover đẹp mắt và khá độc đáo. Cụ thể như thế nào thì hãy đến với phần hướng dẫn và demo nhé.

Demo Và Hướng Dẫn

CSS

Các bạn coppy toàn bộ đoạn CSS dưới đây rồi dán vào bên trong phần body của template



<style>
  .btn{background:none;border:2px solid;border-bottom-width:4px;font:700 14px/1 Noto Sans,sans-serif;letter-spacing:inherit;margin:1em;padding:1em 2em;transition:color 1s;text-transform:uppercase}.btn-1{color:#9c89f7}.btn-1:hover{-webkit-animation:halftone 1s forwards;animation:halftone 1s forwards;background:radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 0 0/1.25em 1.25em,radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 6.25em 6.25em/1.25em 1.25em;color:#e4f789}@-webkit-keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}@keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}.btn-2{color:#82f6d8}.btn-2:hover{-webkit-animation:stripes-move 0.75s infinite linear;animation:stripes-move 0.75s infinite linear;background:repeating-linear-gradient(45deg,#82f6d8 0,#82f6d8 0.25em,transparent 0.25em,transparent 0.5em);color:#f682a0}@-webkit-keyframes stripes-move{100%{background-position:5em 0}}@keyframes stripes-move{100%{background-position:5em 0}}.btn-3{color:#d3f169}.btn-3:hover{-webkit-animation:sawtooth 0.35s infinite linear;animation:sawtooth 0.35s infinite linear;background:linear-gradient(45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em,linear-gradient(-45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em;color:#8769f1}@-webkit-keyframes sawtooth{100%{background-position:1em 0}}@keyframes sawtooth{100%{background-position:1em 0}}.btn-4{color:#eea163}.btn-4:hover{-webkit-animation:zigzag 1s linear infinite;animation:zigzag 1s linear infinite;background:linear-gradient(135deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(225deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(315deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0,linear-gradient(45deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0;background-size:0.75em 0.75em;color:#63b0ee}@-webkit-keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}@keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}.btn-5{color:#7cf07f}.btn-5:hover{-webkit-animation:blinds 0.75s linear forwards;animation:blinds 0.75s linear forwards;background:linear-gradient(0deg,#7cf07f 25%,transparent 25%) 0 0/0.5em 0.5em,linear-gradient(0deg,#88d6f3 50%,transparent 50%) 0 0/1em 1em;color:#f07ced}@-webkit-keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}@keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}.btn-6{color:#f9879b}.btn-6:hover{-webkit-animation:pulse 1s ease-in infinite;animation:pulse 1s ease-in infinite;background:radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0 0/1em 1em,radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0.5em 0.5em/2em 2em;color:#0bdcb7}@-webkit-keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}@keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}
</style>

Demo Và HTML

Dưới đây là Demo và code đi kèm. Các bạn chỉ cần sửa đường link rồi dán code vào nơi muốn hiển thị button và hưởng thụ thành quả thôi



<center><button class="btn btn-1" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>



<center><button class="btn btn-2" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>



<center><button class="btn btn-3" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>



<center><button class="btn btn-4" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>



<center><button class="btn btn-5" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>



<center><button class="btn btn-6" onclick="window.open('https://www.insurancefinances.com/')" target="blank" title="www.insurancefinances.com">Hover me</button></center>

Lời Kết

Vậy là trên đây mình đã chia sẻ đến các bạn cách để tạo một chiếc button đẹp như demo rồi nhé! Nếu có bất kì thắc mắc gì hãy để lại comment ở bên dưới. Chúc các bạn đầu tháng vui vẻ và một tháng thật nhiều niềm vui!