Button

Source: Uiverse ↗
Author: barisdogansutcu
Licence: MIT

Loading…

Code

<div class="plane-button">
    <input type="checkbox" name="checkbox" id="checkbox">
    <button>
        <div class="plane">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path fill="none" d="M0 0h24v24H0V0z"></path>
                <path style="fill: #091607;stroke-width: 1px;stroke: hsl(0deg 0% 100%);" d="M21 14.58c0-.36-.19-.69-.49-.89L13 9V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-7.51 4.69c-.3.19-.49.53-.49.89 0 .7.68 1.21 1.36 1L10 13.5V19l-1.8 1.35c-.13.09-.2.24-.2.4v.59c0 .33.32.57.64.48L11.5 21l2.86.82c.32.09.64-.15.64-.48v-.59c0-.16-.07-.31-.2-.4L13 19v-5.5l6.64 2.08c.68.21 1.36-.3 1.36-1z"></path>
            </svg>
        </div>
        <span class="loading"> <i></i> <i></i> <i></i></span>
        <span class="title">Buy a ticket</span>
        <span class="approved">Approved</span>
    </button>
</div>

Prompt

Build "Button", 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, inline SVG. 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/yellow-husky-22 (barisdogansutcu, MIT).