Tạo nút Demo và Download cùng với cảm giác gơn sóng (wave) sang trọng cảm giác của mắt 2021-02-18 12:58:00
Như nhiều nhiều bạn đọc sẽ biết, việc design blogspot tức thì lập tức hoàn cảnh hiện ni nó ko dễ dàng nguyên tố chức năng nữa tuy rằng thế nó còn cần thêm nguyên tố thẩm mỹ và làm sang trọng của từng member.
Hôm ni, bản thân diễn biến trình diễn tới nhiều nhiều bạn đọc kĩ năng và tay nghề nghỉ ngơi dưỡng Tạo nút Demo và Download cùng với cảm giác gơn sóng (wave) sang trọng cảm giác của mắt. Khi nhấp chuột vào nút loại người nối tiếp thấy cảm giác:
Live Demo
Hướng dẫn
Trước tiên Mở Blogger > Nhấp vào nút Chỉnh sửa HTML > Trình biên tập code.
Thêm CSS bên dưới trước mã ]]> hoặc cặp thẻ
/* Design Material Button */#wrapmargin:20px như máy;text-align:center#wrap atext-decoration:none.tombolripplecursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;phông-size:một.7em;border-radius:4px;color:rgba(255,255,255,0.8);phông-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.một);transition:all 0.3s.tombolripple:hover,.tombolripple:activebox-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22).tombolripple.tsatubackground:#e67e22.tombolripple.tduabackground:#3498db.tombolripple.tsatu:hover,.tombolripple.tsatu:activebackground:#f49541.tombolripple.tdua:hover,.tombolripple.tdua:activebackground:#4aaff3svgposition:absolute;top:0;left:0;width:100%;height:100%circlefill:rgba(255,255,255,0.07).ripple-effectposition:relative;overflow:hidden;-webkit-transform:translatez(0).teffectdisplay:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5.teffect.animateanimation:ripple-effect 0.5s linear@keyframes ripple-effect100%opacity:0;transform:scale(2.5)@-webkit-keyframes ripple-effect100%opacity:0;transform:scale(2.5)
Sau kia thêm mã jQuery này trước mã