3D Flip Confirmation Button

Hiệu ứng nút lật dạng 3D, hiển thị thông báo xác nhận thao tác. Khi nhấn, nút xoay để hiển thị các tùy chọn như “Yes” và “No,” cho phép người dùng xác nhận hoặc hủy bỏ lựa chọn.

Source: codepen.io

Gợi Ý Tích Hợp:

Sử dụng hiển thị thông báo cho xác nhận hành động trên website (ví dụ: xóa tài khoản, danh mục, bài viết,…).
Tích hợp vào các tính năng cần xác nhận trên module, plugin phần quản trị hệ thống web app, cải thiện trải nghiệm tương tác với người dùng.

HTML

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    user-select: none;
}

body {
    display: flex;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 18px;
    perspective: 1000px;
    background-color: #f5f5f5;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.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.230, 1.000, 0.320, 1.000),
        height 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000),
        transform 0.8s cubic-bezier(0.175, 0.885, 0.320, 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;
    transition: background 0.15s ease,
        line-height 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.btn-front:hover {
    background-color: #e53935;
}

.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(-2px) 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;
    transition: background 0.15s ease;
}

.btn-back button:focus {
    outline: none;
}

.btn-back .yes {
    background-color: #2196F3;
    color: #fff;
}

.btn-back .yes:hover {
    background-color: #1e88e5;
}

.btn-back .no {
    color: #2196F3;
}

.btn-back .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(-2px) rotateY(180deg);
}

.btn.is-open {
    width: 500px;
    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);
}

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;

btnYes.addEventListener('click', function() {
    btn.classList.remove('is-open');
  });

btnNo.addEventListener('click', function() {
    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);
  }

Preview: 3D Flip Confirmation Button

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: 3D Flip Confirmation Button

Về WikiPoly

Liên hệ

Gợi Ý Tích Hợp:

HTML

CSS

JavaScript

Preview: 3D Flip Confirmation Button

Đăng nhập