Thảo Luận

×Close

Tạo Button bình buận với hiệu ứng Hover đẹp mắt

Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo buttonbình buận với hiệu ứng Hover đẹp mắt. Button này thường được đặt ở đầu bài viết giúp truy cập nhanh đến phần bình luận của bài viết.

Tạo Button Bình Luận Với Hiệu Ứng Hover Đẹp Mắt
Hình Minh Họa

Các Bước Thực Hiện

Bước 1: Vào trang chỉnh sửa HTML của Blogspot.
Bước 2: Chèn CSS Sau đây vào trước ]]></b:skin>
@charset "UTF-8";.bttn-default{color:#fff}.bttn-primary,.bttn,.bttn-lg,.bttn-md,.bttn-sm,.bttn-xs{color:#1d89ff}.bttn-warning{color:#feab3a}.bttn-danger{color:#ff5964}.bttn-success{color:#28b78d}.bttn-royal{color:#bd2df5}.bttn,.bttn-lg,.bttn-md,.bttn-sm,.bttn-xs{margin:0;padding:0;border-width:0;border-color:transparent;background:transparent;font-weight:400;cursor:pointer;position:relative}.bttn-lg{padding:8px 15px;font-size:24px;font-family:inherit}.bttn-md{font-size:20px;font-family:inherit;padding:5px 12px}.bttn-sm{padding:4px 10px;font-size:16px;font-family:inherit}.bttn-xs{padding:3px 8px;font-size:12px;font-family:inherit}.bttn-fill{margin:0;padding:0;border-width:0;border-color:transparent;background:transparent;font-weight:350;cursor:pointer;position:relative;font-size:18px;font-family:inherit;padding:3px 11px;z-index:0;border:none;background:#fff;color:#1d89ff;-webkit-transition:all 0.3s cubic-bezier(.02,.01,.47,1);transition:all 0.3s cubic-bezier(.02,.01,.47,1)}.bttn-fill:before{position:absolute;bottom:0;left:0;width:100%;height:100%;background:#1d89ff;content:'';opacity:0;-webkit-transition:opacity 0.15s ease-out,-webkit-transform 0.15s ease-out;transition:opacity 0.15s ease-out,-webkit-transform 0.15s ease-out;transition:transform 0.15s ease-out,opacity 0.15s ease-out;transition:transform 0.15s ease-out,opacity 0.15s ease-out,-webkit-transform 0.15s ease-out;z-index:-1;-webkit-transform:scaleX(0);transform:scaleX(0)}.bttn-fill:hover,.bttn-fill:focus{box-shadow:0 1px 8px rgba(58,51,53,.3);color:#fff;-webkit-transition:all 0.5s cubic-bezier(.02,.01,.47,1);transition:all 0.5s cubic-bezier(.02,.01,.47,1)}.bttn-fill:hover:before,.bttn-fill:focus:before{opacity:1;-webkit-transition:opacity 0.2s ease-in,-webkit-transform 0.2s ease-in;transition:opacity 0.2s ease-in,-webkit-transform 0.2s ease-in;transition:transform 0.2s ease-in,opacity 0.2s ease-in;transition:transform 0.2s ease-in,opacity 0.2s ease-in,-webkit-transform 0.2s ease-in;-webkit-transform:scaleX(1);transform:scaleX(1)}.bttn-fill.bttn-xs{padding:3px 8px;font-size:12px;font-family:inherit}.bttn-fill.bttn-xs:hover,.bttn-fill.bttn-xs:focus{box-shadow:0 1px 4px rgba(58,51,53,.3)}.bttn-fill.bttn-sm{padding:4px 10px;font-size:16px;font-family:inherit}.bttn-fill.bttn-sm:hover,.bttn-fill.bttn-sm:focus{box-shadow:0 1px 6px rgba(58,51,53,.3)}.bttn-fill.bttn-md{font-size:20px;font-family:inherit;padding:5px 12px}.bttn-fill.bttn-md:hover,.bttn-fill.bttn-md:focus{box-shadow:0 1px 8px rgba(58,51,53,.3)}.bttn-fill.bttn-lg{padding:8px 15px;font-size:24px;font-family:inherit}.bttn-fill.bttn-lg:hover,.bttn-fill.bttn-lg:focus{box-shadow:0 1px 10px rgba(58,51,53,.3)}.bttn-fill.bttn-default{background:#fff;color:#1d89ff}.bttn-fill.bttn-default:hover,.bttn-fill.bttn-default:focus{color:#fff}.bttn-fill.bttn-default:before{background:#1d89ff}.bttn-fill.bttn-primary{background:#1d89ff;color:#fff}.bttn-fill.bttn-primary:hover,.bttn-fill.bttn-primary:focus{color:#1d89ff}.bttn-fill.bttn-primary:before{background:#fff}.bttn-fill.bttn-warning{background:#feab3a;color:#fff}.bttn-fill.bttn-warning:hover,.bttn-fill.bttn-warning:focus{color:#feab3a}.bttn-fill.bttn-warning:before{background:#fff}.bttn-fill.bttn-danger{background:#ff5964;color:#fff}.bttn-fill.bttn-danger:hover,.bttn-fill.bttn-danger:focus{color:#ff5964}.bttn-fill.bttn-danger:before{background:#fff}.bttn-fill.bttn-success{background:#069999;color:#fff;border-radius: 37px;font-size: 18px;}.bttn-fill.bttn-success:hover,.bttn-fill.bttn-success:focus{color:#069999}.bttn-fill.bttn-success:before{background:#fff}.bttn-fill.bttn-royal{background:#bd2df5;color:#fff}.bttn-fill.bttn-royal:hover,.bttn-fill.bttn-royal:focus{color:#bd2df5}.bttn-fill.bttn-royal:before{background:#fff}
Bước 3: Chèn Đoạn code sau vào nơi muốn hiển thị. (VD: bên cạnh tổng số bình luận, đầu bài viết, cuối bài viết,..)
<a href="#comment-editor" rel="nofollow" style="user-select: text;"><button class="bttn-fill bttn-md bttn-success" style="user-select: text;">Viết Bình Luận</button></a>

Lời Kết

Với cách tạo Button bình buận với hiệu ứng Hover đẹp mắt sẽ giúp các bạn đi đến nhanh phần bình luận của bài viết trong tích tắc. Thủ thuật cũng khá đơn giản, chúc các bạn thành công!

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

72 nhận xét
Hiển thị
  1. - tiện tích :v top 1 cmt nek :3

    Trả lờiXóa
  2. Đầu bài viết thêm ở đâu ???

    Trả lờiXóa
    Trả lời
    1. Tìm Class của tiêu đề bài viết hay gì gì đó rồi chèn thôi =))

      Xóa
  3. Trả lời
    1. hehe tui Cmt 2. Thấy a Cường đăng lên FB vào tranh cmt liền :)

      Xóa
  4. pro quá a cường ơi :v

    Trả lờiXóa
  5. Rất hay like mạnh cho đại ca Cường BD :))

    Trả lờiXóa
  6. đổi tên miền blog tn z cường dz?

    Trả lờiXóa
    Trả lời
    1. Mua domain xong vào phần cài đặt có chỗ đổi nhé bạn.

      Xóa
    2. Bạn cần có tên miền Blog, rồi sau đó cài vào blog trong phần cài đặt. Nếu chưa biết thì có thể lên google để search bạn nhé!

      Xóa
  7. Đỉnh luôn, đúng là coder.

    Trả lờiXóa
  8. Hover này lấy trong mấy cái web Phú Cường post ý hả?

    Trả lờiXóa
  9. Haha, đúng cái đang cần :3

    Trả lờiXóa
  10. Cường thiết kế cái Về Star Cường IT dưới footer cho nó bo tròn giống cái Bình Luận Mới với Blog Bạn Bè luôn!

    Trả lờiXóa
    Trả lời
    1. Nó chỉ có cái chữ -_- giờ biết làm sao cho nó tròn đây :v chả nhẽ bo tròn từng chữ =))

      Xóa
    2. Kiểu như tạo cái khung bo góc rồi bỏ chữ vào trong đó.

      Xóa
    3. Bỏ vào cái khung nó xấu lắm =)) kebanodi :v

      Xóa
  11. phong cách temp mìnhd dây r :))

    Trả lờiXóa
  12. demo đâu bạn chịch

    Trả lờiXóa
  13. Ra bài mới đi chứ a :3

    Trả lờiXóa
    Trả lời
    1. Cho người ta thở với chứ, mới ra hôm qua mà.

      Xóa
  14. mới thấy 3k8 4k mấy cmt giờ lên 5k4 comments rồi kinh điển quá :v 1 bài viết hót là lên comments vèo vèo hóng ra bài mới nhen :"<

    Trả lờiXóa
    Trả lời
    1. 5k lúc đầu cơ man -_- chắc nhìn nhầm hay gì rồi ♥ Cảm ơn Huỳnh Hoài Bảo nhé ^^

      Xóa
  15. Lâu ko qua blog a Cường :v Cho e xin lỗi về vụ template lúc trước của a nhé :(
    Tym nào <3

    Trả lờiXóa
    Trả lời
    1. Haha, lâu rồi giờ anh cũng chẳng nhớ cái vụ đó luôn :v Nhớ ghé thăm Star Cường IT thường xuyên nhé.

      Xóa
    2. Vụ temp nào đấy. Cho biết đi để khêu mào ra cho cãi nhau nào :v

      Xóa
    3. ahihi :v chuyện nhỏ xíu à a :v có gì đâu mà cãi nhau

      Xóa
  16. Mới chợp mắt ngủ cái là blog có đổi mới rồi, phần footer chất quá <3.

    Trả lờiXóa
    Trả lời
    1. Hehe, Cảm ơn em đã quá khen nhé ^^ Ngủ đi cho da đẹp :v

      Xóa
  17. Nặc danh19 tháng 11

    Đầu khung bình luận...v chèn trước thẻ nào vậy a

    Trả lờiXóa
    Trả lời
    1. Gửi Link Blog bạn mình xem.

      Xóa
    2. Nặc danh19 tháng 11

      Starduongdesign.blogspot.com

      Xóa
    3. Chèn sau <h4 href='#comments'><i class='fa fa-comments-o' ... Nhé!

      Xóa
    4. Nặc danh19 tháng 11

      Thanks

      Xóa
  18. Trả lời
    1. Cường luôn luôn đẹp trai mà :v không cần phải nhắc điều đó :3

      Xóa
  19. - Tui Nghĩ Là Ông Nên Làm Demo Cho Mọi Người Dễ Hình Dung Hơn !!!

    Trả lờiXóa
  20. 1 hiệu ứng đơn giản nhưng code rất dài, ta có thể thấy học web k hề đơn giản hihi

    Trả lờiXóa
  21. cuối cùng thì bài 10 trang web bổ ích của mình cũng đc cường it vận dụng khá sáng tạo

    Trả lờiXóa
Mới hơn Cũ hơn

Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK

Quảng cáo giúp StarCuongIT.Com duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.

Bạn vui lòng tắt Adblock hoặc cho QuangNinhBay.Com vào danh sách trắng trong công cụ chặn quảng cáo của bạn. Cảm ơn!

×