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é.
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>
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,..)
LỜI KẾT
Chỉ đơn giản thế thôi, mình phải đi ăn tối nữa :))
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!
Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!
ConversionConversion EmoticonEmoticon