Chào các bạn, Blog mình vừa cập nhật Button "Viết bình Luận" Với hiệu ứng hover khá chất, và theo như yêu cầu của một bạn gửi cho mình thì hôm nay mình sẽ hướng dẫn luôn cho các bạn cách tạo button này nhé.
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

Chỉ đơn giản thế thôi, mình phải đi ăn tối nữa :))
Chúc các bạn thành công!

CHIA SẺ BÀI VIẾT

- - 72 bình luận
CHUYÊN MỤC

BÌNH LUẬN (72)

  1. Đầ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
  2. 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
  3. Rất hay like mạnh cho đại ca Cường BD :))

    Trả lờiXóa
  4. đổ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
  5. Hover này lấy trong mấy cái web Phú Cường post ý hả?

    Trả lờiXóa
  6. 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
  7. 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
  8. 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
  9. 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
  10. Đầu khung bình luận...v chèn trước thẻ nào vậy a

    Trả lờiXóa
  11. 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
  12. - Tui Nghĩ Là Ông Nên Làm Demo Cho Mọi Người Dễ Hình Dung Hơn !!!

    Trả lờiXóa
  13. 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
  14. 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