Sự kết hợp giữa CSS3 và jQuery luôn luôn mang lại những hiệu ứng đẹp và ấn tượng, việc hiểu và sử dụng tốt sự kết hợp này sẽ giúp các bạn làm chủ website cũng như đưa ra những giải pháp thiết kế web tốt nhất cho khách hàng của mình. Hôm nay, mình sẽ chia sẻ cho các bạn thêm một hiệu ứng button được làm từ CSS3 và jQuery, với hiệu ứng không chê vào đâu được.
Download
HTML
Chúng ta sẽ cần đoạn html bên sau để tạo hộp thoại confirm.
<div class="btn">
<div class="btn-back">
<p>Are you sure you want to do that?</p>
<button class="yes">Yes</button>
<button class="no">No</button>
</div>
<div class="btn-front">Delete</div>
</div>
CSS
Và đây là toàn bộ đoạn css giúp tạo hiệu ứng
.description {
margin-top: 50px;
text-align: center;
color: #999;
transition: opacity 0.3s ease;
}
.description a {
color: #4A9DF6;
text-decoration: none;
}
.btn.is-open ~ .description {
opacity: 0;
}
.btn {
display: block;
position: relative;
width: 200px;
height: 80px;
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
transform-origin: 50% 50%;
text-align: center;
}
.btn-front {
position: absolute;
display: block;
width: 100%;
height: 100%;
line-height: 80px;
background-color: #F44336;
color: #fff;
cursor: pointer;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-front:hover {
background-color: #f77066;
}
.btn.is-open .btn-front {
pointer-events: none;
line-height: 160px;
}
.btn-back {
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
color: #222;
transform: translateZ(-1px) rotateX(180deg);
overflow: hidden;
transition: box-shadow 0.8s ease;
}
.btn-back p {
margin-top: 27px;
margin-bottom: 25px;
}
.btn-back button {
padding: 12px 20px;
width: 30%;
margin: 0 5px;
background-color: transparent;
border: 0;
border-radius: 2px;
font-size: 1em;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.btn-back button:focus {
outline: 0;
}
.btn-back button.yes {
background-color: #2196F3;
color: #fff;
}
.btn-back button.yes:hover {
background-color: #51adf6;
}
.btn-back button.no {
color: #2196F3;
}
.btn-back button.no:hover {
background-color: #ddd;
}
.btn.is-open .btn-back {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
transform: translateZ(-1px) rotateY(180deg);
}
.btn.is-open {
width: 400px;
height: 160px;
}
.btn[data-direction="top"].is-open {
transform: rotateX(180deg);
}
.btn[data-direction="right"].is-open {
transform: rotateY(180deg);
}
.btn[data-direction="bottom"].is-open {
transform: rotateX(-180deg);
}
.btn[data-direction="left"].is-open {
transform: rotateY(-180deg);
}
jQuery
Tuy nhiên, để hiệu ứng có thể chạy, thì các bạn cần chèn thêm đoạn scritp sau :
<script type="text/javascript">
var btn = document.querySelector( '.btn' );
var btnFront = btn.querySelector( '.btn-front' ),
btnYes = btn.querySelector( '.btn-back .yes' ),
btnNo = btn.querySelector( '.btn-back .no' );
btnFront.addEventListener( 'click', function( event ) {
var mx = event.clientX - btn.offsetLeft,
my = event.clientY - btn.offsetTop;
var w = btn.offsetWidth,
h = btn.offsetHeight;
var directions = [
{ id: 'top', x: w/2, y: 0 },
{ id: 'right', x: w, y: h/2 },
{ id: 'bottom', x: w/2, y: h },
{ id: 'left', x: 0, y: h/2 }
];
directions.sort( function( a, b ) {
return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
} );
btn.setAttribute( 'data-direction', directions.shift().id );
btn.classList.add( 'is-open' );
} );
btnYes.addEventListener( 'click', function( event ) {
btn.classList.remove( 'is-open' );
} );
btnNo.addEventListener( 'click', function( event ) {
btn.classList.remove( 'is-open' );
} );
function distance( x1, y1, x2, y2 ) {
var dx = x1-x2;
var dy = y1-y2;
return Math.sqrt( dx*dx + dy*dy );
}
</script>
Các bạn nhớ chèn thư viện jQuery trước khi chèn đoạn script nhé.