[Blogger] Tạo hiệu ứng gợn sóng (Ripple Effect) cho blogspot

Hiệu ứng gợn sóng (Ripple Effect) được sử dụng trong hầu hết template Material Design, nó tập trung chủ yếu vào việc làm nổi bật button khi có sự kiện click từ phía người dùng. Ripple Effect rất dễ sử dụng, chỉ bao gồm css, không làm thay đổi bố cục nên bạn cần có nó cho website của mình

Xem live demo tại đây
 DEMO
Ok bắt đầu thủ thuật, tôi thường dùng button tạo sẵn của boostrap, bạn kiểm tra template của mình đã có css của bootstrap chưa, nếu có rồi thì chỉ cần chèn thêm css của Ripple còn nếu chưa có thì có thể nhúng toàn bộ code sau vào trước thẻ ]]></b:skin>

.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}
.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}
.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:normal;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}
.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn.disabled,.btn[disabled]{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}
a.btn.disabled{pointer-events:none}
.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}
.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}
.btn-default:active,.btn-default.active{color:#333;background-color:#e6e6e6;border-color:#adadad}
.btn-default:active:hover,.btn-default.active:hover,.btn-default:active:focus,.btn-default.active:focus,.btn-default:active.focus,.btn-default.active.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}
.btn-default:active,.btn-default.active{background-image:none}
.btn-default.disabled:hover,.btn-default[disabled]:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,.btn-default.disabled.focus,.btn-default[disabled].focus{background-color:#fff;border-color:#ccc}
.btn-default .badge{color:#fff;background-color:#333}
.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-primary:active,.btn-primary.active{color:#fff;background-color:#286090;border-color:#204d74}
.btn-primary:active:hover,.btn-primary.active:hover,.btn-primary:active:focus,.btn-primary.active:focus,.btn-primary:active.focus,.btn-primary.active.focus{color:#fff;background-color:#204d74;border-color:#122b40}
.btn-primary:active,.btn-primary.active{background-image:none}
.btn-primary.disabled:hover,.btn-primary[disabled]:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus{background-color:#337ab7;border-color:#2e6da4}
.btn-primary .badge{color:#337ab7;background-color:#fff}
.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
.btn-success:focus,.btn-success.focus{color:#fff;background-color:#449d44;border-color:#255625}
.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}
.btn-success:active,.btn-success.active{color:#fff;background-color:#449d44;border-color:#398439}
.btn-success:active:hover,.btn-success.active:hover,.btn-success:active:focus,.btn-success.active:focus,.btn-success:active.focus,.btn-success.active.focus{color:#fff;background-color:#398439;border-color:#255625}
.btn-success:active,.btn-success.active{background-image:none}
.btn-success.disabled:hover,.btn-success[disabled]:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,.btn-success.disabled.focus,.btn-success[disabled].focus{background-color:#5cb85c;border-color:#4cae4c}
.btn-success .badge{color:#5cb85c;background-color:#fff}
.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus,.btn-info.focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-info:active,.btn-info.active{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-info:active:hover,.btn-info.active:hover,.btn-info:active:focus,.btn-info.active:focus,.btn-info:active.focus,.btn-info.active.focus{color:#fff;background-color:#269abc;border-color:#1b6d85}
.btn-info:active,.btn-info.active{background-image:none}
.btn-info.disabled:hover,.btn-info[disabled]:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,.btn-info.disabled.focus,.btn-info[disabled].focus{background-color:#5bc0de;border-color:#46b8da}
.btn-info .badge{color:#5bc0de;background-color:#fff}
.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}
.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ec971f;border-color:#985f0d}
.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}
.btn-warning:active,.btn-warning.active{color:#fff;background-color:#ec971f;border-color:#d58512}
.btn-warning:active:hover,.btn-warning.active:hover,.btn-warning:active:focus,.btn-warning.active:focus,.btn-warning:active.focus,.btn-warning.active.focus{color:#fff;background-color:#d58512;border-color:#985f0d}
.btn-warning:active,.btn-warning.active{background-image:none}
.btn-warning.disabled:hover,.btn-warning[disabled]:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus{background-color:#f0ad4e;border-color:#eea236}
.btn-warning .badge{color:#f0ad4e;background-color:#fff}
.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-danger:active,.btn-danger.active{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-danger:active:hover,.btn-danger.active:hover,.btn-danger:active:focus,.btn-danger.active:focus,.btn-danger:active.focus,.btn-danger.active.focus{color:#fff;background-color:#ac2925;border-color:#761c19}
.btn-danger:active,.btn-danger.active{background-image:none}
.btn-danger.disabled:hover,.btn-danger[disabled]:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus{background-color:#d9534f;border-color:#d43f3a}
.btn-danger .badge{color:#d9534f;background-color:#fff}
.btn-link{font-weight:normal;color:#337ab7;border-radius:0}
.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled]{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}
.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}
.btn-link:hover,.btn-link:focus{color:#23527c;text-decoration:underline;background-color:transparent}
.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#777;text-decoration:none}

Viết HTML sử dụng button + ripple rất đơn giản chỉ cần thêm ripple vào class của thẻ a ví dụ

<a class="class1 class2 ripple">Default</a>

Kết quả Default

Rất đơn giản nhưng lại cực đẹp mắt đúng không. Chúc bạn thành công !