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.

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!