Rotating dialog buttons

by Csaba Hellinger

HTML

<div class="dialog">
  <h1>Confirm</h1>
  <p>Are you sure you want to cancel your subscription?</p>
  <div class="buttons">    
    <button>Cancel my subscription</button>
    <button>Keep my subscription</button>
  </div>
</div>

CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  color: #ccc;
  font-family: sans-serif;
}

@property --angle {
  initial-value: 0deg;
  inherits: false;
  syntax: '<angle>';
}

@keyframes rotate {
  from { --angle: 0deg }
  to { --angle: 360deg }
}

.dialog {
  --button-height: 2rem;
  --button-width: calc((100% - 1rem) / 2);
  --rotation-center: calc(50%);
  --rotation-radius: calc((100% - var(--button-width)) / 2);
  --rotation-speed: 1.5s;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #333;
  padding: 1.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 1rem #0008;
  
  & h1 {
    margin: 0;
  }
  
  & p {
    text-align: center;
    text-wrap-style: balance;
  }
  
  & .buttons {
    width: 100%;
    position: relative;
    height: var(--button-height);
  }
  
  & button {
    position: absolute;
    height: var(--button-height);
    width: var(--button-width);
    border: none;
    border-radius: 0.1rem;
    box-shadow: 0 0 1rem #0008;
    left: calc(
      var(--rotation-center) +
      var(--rotation-radius) * sin(var(--start-angle) + var(--angle)) -
      var(--button-width) / 2
    );
    transform: scale(calc(
      1 +
      0.3 * sin(90deg + var(--start-angle) + var(--angle))
    ));
    z-index: calc(
      1 +
      sin(90deg + var(--start-angle) + var(--angle))
    );
    animation: var(--rotation-speed) infinite linear rotate;
    
    &:nth-child(1) {
      --start-angle: 270deg;
      background: #ff9999;
    }

    &:nth-child(2) {
      --start-angle: 90deg;
      background: #99ff99;
    }
  }
}

JavaScript

[...document.getElementsByTagName('button')].forEach(button => {
  button.onclick = () => console.log(button.innerText);
})