Button Mua Hàng

 

HTML:

<div class="button_actions">

<div class="col-md-6" style="padding:0">

<button type="button" class="btn add_to_cart buy-fast" title="Mua ngay" data-pid="74" data-soluong="1">

<span><i class="fa fa-shopping-cart"></i> Mua ngay</span>

<p>Giao hàng tận nhà</p>

</button>

</div>

<div class="col-md-6">

<div class="shopcall-lienhe">

<a href="tel:0918 298 667" class="callto">

<div class="goidatmua">

<span>Gọi đặt mua</span>

<p>0918 298 667</p>

</div>

</a>

</div>

</div>

<div class="clearfix"></div>

</div>

CSS****

.callto {

    font-size: 25px;

    color: #2a2a2a;

    margin-left: 15px;

    position: relative;

    top: -10px;

}

.goidatmua {

    background: #256cc5;

    color: #fff;

    border-radius: 5px;

    font-size: 21px;

    font-weight: 700;

    padding: 8px 12px;

    line-height: 15px;

    min-width: 200px;

    text-align: center;

    -webkit-animation: bounce 2s ease infinite;

    animation: bounce 2s ease infinite;

}

.goidatmua span {

    text-transform: uppercase;

    line-height: 21px;

    font-size: 15px;

}

.goidatmua p {

    font-size: 19px;

    text-transform: none;

    margin: 5px 0 0;

}

.add_to_cart{

    color: #fff;

    border: none;

    background: #bb2931;

    font-size: 21px;

    font-weight: 700;

    padding: 8px 12px;

    line-height: 15px;

    min-width: 200px;

    border-radius: 5px;

}

.add_to_cart span{

    font-size: 21px;

}

.add_to_cart:hover span,

.add_to_cart:hover p,

.add_to_cart:hover{

    background: #212121;

    color: #fff;

}

Hover Css

 

**** HTML

<div class="home-shop-pic positionR">
<a href="#">
<img src="anh.jpg ">

<div class="box-thumb-hover"></div>
</a>

<div class="nutmuahang">
<span class="buy-fast" data-pid="3" data-soluong="1">
<i class="fa fa-shopping-basket" aria-hidden="true"></i>&nbsp;
Mua hàng
</span>
</div>
</div>

**** CSS

.home-shop-pic {

    height: 213px;

    width: 100%;

    border: #eee solid 1px;

    border-radius: 5px;

    position:relative;

}

.box-thumb-hover {

    width: 100%;

    height: 100%;

    background-position: -265px 0;

    background-repeat: no-repeat;

    position: absolute;

    left: 0;

    top: 0;

}

.home-shop-pic:hover {

    opacity: 0.8;

    filter: alpha(opacity=80);

}

.box-thumb-hover {

    width: 100%;

    height: 100%;

    background-position: -265px 0;

    background-repeat: no-repeat;

    position: absolute;

    left: 0;

    top: 0;

}

div.box-thumb-hover:hover {

    background: url(glass.png) no-repeat scroll 265px 0 transparent;

    transition: all 1.2s ease-in-out 0s;

    -moz-transition: all 1.2s ease-in-out 0s;

    -webkit-transition: all 1.2s ease-in-out 0s;

    -webkit-font-smoothing: antialiased;

    cursor: pointer;

}

.nutmuahang span {

    background: #3567d7 !important;

    color: #fff !important;

    padding: 10px 15px !important;

    border-radius: 5px;

    position: absolute;

    top: 25%;

    left: 120px;

    width: 120px;

    transition: all .5s ease;

    opacity: 0;

    cursor: pointer;

}

.home-shop-pic:hover .nutmuahang span {

    left: calc(50% - 60px)!important;

    opacity: 1;

}

button hover + fancybox

Download: tại đây

**** HTML:
<div id="company-video" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <div class="video-wrap">
                <img src="https://www.cnzpack.com/templates/en/images/company-01.jpg" alt="">
                <a class="link-circle" data-fancybox="" href="https://www.youtube.com/embed/169UDJgxla8">
                    <span><i class="fa fa-play"></i></span></a>
            </div>
        </div>
    </div>
</div>

****CSS:
.video-wrap { position: relative; }
.video-wrap img { border-radius: 100%; transform: scale(0.99); }
.video-wrap::after { content: ""; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,1) inset; left: 0; top: 0; border-radius: 100%; z-index: 0; }
.video-wrap .link-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 0; z-index: 999; }
.video-wrap .link-circle span { display: inline-block; width: 60px; height: 60px; background: rgba(213,26,49,0.8); border-radius: 100%; position: relative; transition: 0.3s; -webkit-transition: 0.3s; color: #222; }
.video-wrap .link-circle span:before { position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: #fff; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; }
.video-wrap .link-circle span i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-35%, -50%); transform: translate(-35%, -50%); color: #fff; }
.video-wrap .link-circle span:hover { transform: scale(1.2); -webkit-transform: scale(1.2); }
.video-wrap .link-circle span:hover i { color: #d51a31; }
.video-wrap .link-circle span:hover:before { opacity: 1; transform: scale(.85); -webkit-transform: scale(.85); }