****HTML:
<div class="more-pagedv">
<input type="hidden" id="hidiv" name="hidiv" value="8">
<input type="hidden" id="tongbaiviet" class="tongbaiviet" name="tongbaiviet" value="16">
<span class="btn btn-effect-default btn-theme">
<i class="fa fa-angle-double-right"></i> Xem thêm
</span>
</div>
****JS
function tongcong(a,b){
return a+b;
}
$(".more-pagedv").on('click', function() {
let c = parseInt(document.getElementById("tongbaiviet").value);
let a = parseInt(document.getElementById("hidiv").value);
let b = 8;
let soluong = tongcong(a,b);
$.ajax({
url: '/admin.php',
type: 'POST',
dataType: 'html',
data: {name:'sanpham',op:'tongcongtrinh',soluong:soluong},
})
.done(function(data) {
if(soluong>=c){
$(".more-pagedv").hide();
}
$("input[name=hidiv]").val(soluong);
$(".bodynhomsp").html(data);
});
});
**** CSS
.btn-effect-default.btn-theme{
border: 1px solid #f1c232;
}
.btn-effect-default.btn-theme:before{
background-color:#f1c232;
}
.btn-effect-default.btn-theme:hover{
background-color:#fff;
color:#f1c232;
}
.btn-effect-default{
position:relative;
display:inline-block;
font-weight:700;
line-height:30px;
cursor:pointer;
text-decoration:none;
padding:5px 28px;
color:#fff;
border:1px solid #000;
border-radius:5px 5px;
text-transform:uppercase;
font-size:17px;
text-align:center;
letter-spacing:1px;
background-color:transparent;
-webkit-transition:color 0.45s cubic-bezier(.785,.135,.15,.86),border 0.45s cubic-bezier(.785,.135,.15,.86);transition:color 0.45s cubic-bezier(.785,.135,.15,.86),border 0.45s cubic-bezier(.785,.135,.15,.86);
z-index:1;
overflow:hidden
}
.btn-effect-default:before{
position:absolute;
content:'';
display:block;
left:-2px;top:0;
right:-2px;
bottom:0;
-webkit-transform:scale(1,1);
transform:scale(1,1);
-webkit-transform-origin:left center;
transform-origin:left center;
z-index:-1;
background-color:#000;
-webkit-transition:-webkit-transform 0.45s cubic-bezier(.785,.135,.15,.86);
transition:-webkit-transform 0.45s cubic-bezier(.785,.135,.15,.86);
transition:transform 0.45s cubic-bezier(.785,.135,.15,.86)
}
.btn-effect-default:hover:before{
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:scale(0,1);
transform:scale(0,1)
}
