Confirm Button Cực Pro với sự kết hợp giữa CSS3 và jQuery

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.

Xem Demo | 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;
  awidth: 200px;
  height: 80px;
  transition: awidth 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;
  awidth: 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;
  awidth: 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;
  awidth: 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 {
  awidth: 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é.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster