Categories: Thủ Thuật Mới

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

Tạo Button bình buận cùng với cảm giác Hover sang trọng cảm giác của mắt 2017-11-17 12:08:00


Hôm ni bản thân nối tiếp chỉ dẫn theo những nhiều bạn đọc kĩ năng và tay nghề nghỉ ngơi dưỡng tạo nên buttonbình buận cùng với cảm giác Hover sang trọng cảm giác của mắt. Button này thông thường xuyên được đặt tại đầu Post bài chưng vứt luận góp truy nhập sớm chóng tới phần comment của Post bài chưng vứt luận.
Hình Minh HọaDemo Viết Bình Luận
Các Cách Thực Hiện
Cách một: Vào trang biên tập HTML của Blogspot.
Cách 2: Chèn CSS Sau phía trên vào trước ]]>
@charset “UTF-8″;.bttn-mang địnhcolor:#fff.bttn-primary,.bttn,.bttn-lg,.bttn-md,.bttn-sm,.bttn-xscolor:#1d89ff.bttn-warningcolor:#feab3a.bttn-dangercolor:#ff5964.bttn-successcolor:#28b78d.bttn-royalcolor:#bd2df5.bttn,.bttn-lg,.bttn-md,.bttn-sm,.bttn-xsmargin:0;padding:0;border-width:0;border-color:transparent;background:transparent;phông-weight:400;cursor:pointer;position:relative.bttn-lgpadding:8px 15px;phông-size:24px;phông-family:inherit.bttn-mdphông-size:20px;phông-family:inherit;padding:5px 12px.bttn-smpadding:4px 10px;phông-size:16px;phông-family:inherit.bttn-xspadding:3px 8px;phông-size:12px;phông-family:inherit.bttn-fillmargin:0;padding:0;border-width:0;border-color:transparent;background:transparent;phông-weight:350;cursor:pointer;position:relative;phông-size:18px;phông-family:inherit;padding:3px 11px;z-index:0;border:none;background:#fff;color:#1d89ff;-webkit-transition:all 0.3s cubic-bezier(.02,.01,.47,một);transition:all 0.3s cubic-bezier(.02,.01,.47,một).bttn-fill:beforeposition:absolute;bottom:0;left:0;width:100%;height:100%;background:#1d89ff;nội dung:”;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:-một;-webkit-transform:scaleX(0);transform:scaleX(0).bttn-fill:hover,.bttn-fill:focusbox-shadow:0 1px 8px rgba(58,51,53,.3);color:#fff;-webkit-transition:all 0.5s cubic-bezier(.02,.01,.47,một);transition:all 0.5s cubic-bezier(.02,.01,.47,một).bttn-fill:hover:before,.bttn-fill:focus:beforeopacity:một;-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(một);transform:scaleX(một).bttn-fill.bttn-xspadding:3px 8px;phông-size:12px;phông-family:inherit.bttn-fill.bttn-xs:hover,.bttn-fill.bttn-xs:focusbox-shadow:0 1px 4px rgba(58,51,53,.3).bttn-fill.bttn-smpadding:4px 10px;phông-size:16px;phông-family:inherit.bttn-fill.bttn-sm:hover,.bttn-fill.bttn-sm:focusbox-shadow:0 1px 6px rgba(58,51,53,.3).bttn-fill.bttn-mdphông-size:20px;phông-family:inherit;padding:5px 12px.bttn-fill.bttn-md:hover,.bttn-fill.bttn-md:focusbox-shadow:0 1px 8px rgba(58,51,53,.3).bttn-fill.bttn-lgpadding:8px 15px;phông-size:24px;phông-family:inherit.bttn-fill.bttn-lg:hover,.bttn-fill.bttn-lg:focusbox-shadow:0 1px 10px rgba(58,51,53,.3).bttn-fill.bttn-mang địnhbackground:#fff;color:#1d89ff.bttn-fill.bttn-mang định:hover,.bttn-fill.bttn-mang định:focuscolor:#fff.bttn-fill.bttn-mang định:beforebackground:#1d89ff.bttn-fill.bttn-primarybackground:#1d89ff;color:#fff.bttn-fill.bttn-primary:hover,.bttn-fill.bttn-primary:focuscolor:#1d89ff.bttn-fill.bttn-primary:beforebackground:#fff.bttn-fill.bttn-warningbackground:#feab3a;color:#fff.bttn-fill.bttn-warning:hover,.bttn-fill.bttn-warning:focuscolor:#feab3a.bttn-fill.bttn-warning:beforebackground:#fff.bttn-fill.bttn-dangerbackground:#ff5964;color:#fff.bttn-fill.bttn-danger:hover,.bttn-fill.bttn-danger:focuscolor:#ff5964.bttn-fill.bttn-danger:beforebackground:#fff.bttn-fill.bttn-successbackground:#069999;color:#fff;border-radius: 37px;phông-size: 18px;.bttn-fill.bttn-success:hover,.bttn-fill.bttn-success:focuscolor:#069999.bttn-fill.bttn-success:beforebackground:#fff.bttn-fill.bttn-royalbackground:#bd2df5;color:#fff.bttn-fill.bttn-royal:hover,.bttn-fill.bttn-royal:focuscolor:#bd2df5.bttn-fill.bttn-royal:beforebackground:#fff
Cách 3: Chèn Đoạn code sau vào khu vực mong muốn hiển thị. (VD: cạnh mặt tổng số comment, đầu Post bài chưng vứt luận, cuối Post bài chưng vứt luận,..)
Lời Kết
Với kĩ năng và tay nghề nghỉ ngơi dưỡng tạo nên Button bình buận cùng với cảm giác Hover sang trọng cảm giác của mắt nối tiếp góp nhiều nhiều bạn đọc tiến tới sớm chóng phần comment của Post bài chưng vứt luận vào giây lát. Thủ thuật cũng kha khá dễ dàng, chúc nhiều nhiều bạn đọc thành tựu giỏi!

Tài Liệu Tạo Button bình buận cùng với cảm giác Hover sang trọng cảm giác của mắt

2017-11-17 12:08:00 #Tạo #Button #bình #buận #cùng với #hiệu #ứng #Hover #sang trọng #cảm giác của mắt

tinh

Published by
tinh