3D Flip Confirmation Button

The “3D Flip Confirmation Button” is an interactive UI effect where a button flips in 3D space to reveal a confirmation prompt before performing action. On click, button rotates to display options like “Yes” and “No,” allowing users to confirm or cancel choice. This visually engaging effect adds an extra layer of user assurance for sensitive actions, such as deleting content.

Source: codepen.io

Integration Suggestions:

Ideal for website action confirmations (e.g., deleting accounts, items).
Can be used as a module in admin dashboards or e-commerce sites for critical decisions.
Easily added as a plugin for form submissions or interactive prompts in web apps, improving user experience with a clean, dynamic design.

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

About WikiPoly

Contact

Integration Suggestions:

HTML

CSS

JavaScript

Preview: 3D Flip Confirmation Button

Login