Baktiyar Ablaikhan

Funny

Source
Uiverse ↗
Author
barisdogansutcu
Licence
MIT

Loading…

Code

<div class="click">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <button class="button up">
    <div class="speak dblink">
      <div class="wrap">
        <div class="eye double-blink"></div>
        <div class="eye double-blink"></div>
      </div>
    </div>
    <p></p>
    <p></p>
    <p></p>
    <div class="speak doblink">
      <div class="wrap">
        <div class="eye down"></div>
        <div class="eye down"></div>
      </div>
    </div>
    <div class="speak rblink">
      <div class="wrap">
        <div class="eye right-blink"></div>
        <div class="eye right-blink"></div>
      </div>
    </div>
    <div class="speak ublink">
      <div class="wrap">
        <div class="eye up-blink"></div>
        <div class="eye up-blink"></div>
      </div>
    </div>
  </button>
  <button disabled="" class="button shadow"></button>
</div>
Prompt

Build "Funny", a button animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes. It sits on a dark background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/barisdogansutcu/bitter-dragon-16 (barisdogansutcu, MIT).