**** HTML<div class="product-detail-head">
<div class="detail-theme-image">
<div class="inner-image">
<div class="img ratio-1-1">
<a data-fancybox="gallery'.$id.'" data-caption="'.$subject.'" href="url:images">
<img src="url:images" class="img-fluid">
</a>
</div>
</div>
<div class="theme-bottom-image">
<div class="col-12 col-md-6">
<div class="item item-view-demo">
<a href="/view-demo/doanhnghiep03" class="btn btn-submit w-100" target="_blank">Xem thực tế</a>
</div>
</div>
<div class="col-12 col-md-6">
<div class="item item-registertrial"><button class="btn btn-submit-white w-100" nh-category-id="163" nh-template="doanhnghiep03" btn-registertrial="">Dùng thử</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
**** CSS
.product-detail-head {
background: #fff;
padding: 15px;
box-shadow: 0 .3rem 1.525rem -.375rem rgba(0, 0, 0, .1);
border-radius: 8px;
}
.detail-theme-image {
position: relative;
}
.detail-theme-image .inner-image {
border-radius: 8px;
overflow: hidden;
}
.ratio-1-1 {
padding-top: 100%;
position: relative;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.ratio-1-1 img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.detail-theme-image .inner-image .img:hover img {
object-position: bottom;
}
.detail-theme-image .inner-image .img img {
object-position: top;
-webkit-transition: all 3s ease-in-out 0s;
-moz-transition: all 3s ease-in-out 0s;
-ms-transition: all 3s ease-in-out 0s;
transition: all 3s ease-in-out 0s;
}
/*** 2 buttton******/
.btn {
z-index: 0;
border: 0;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn:hover {
color: #fff !important;
}
.btn:not(.btn-registertrial) {
position: relative;
overflow: hidden;
}
.w-100 {
width: 100% !important;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.85rem 1.25rem;
font-size: 1.4rem;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:not(.btn-registertrial):before {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
left: -40px;
transform: skewX(45deg);
background: linear-gradient(90deg, #0D5DD6 0%, #9747FF 100%);
z-index: -1;
transition: all 1s;
}
.btn:not(.btn-registertrial):hover:before {
width: 160%;
}
.btn:not(.btn-registertrial):before {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
left: -40px;
transform: skewX(45deg);
background: linear-gradient(90deg, #0D5DD6 0%, #9747FF 100%);
z-index: -1;
transition: all 1s;
}
.btn-submit {
border: 1px solid #0D5DD6;
background-color: #0D5DD6;
color: #fff;
border-radius: .5rem;
}
.btn-submit-white {
width: 100%;
border: 1px solid #0D5DD6;
color: #0D5DD6;
border-radius: 0.5rem;
}
