Baktiyar Ablaikhan

Button

Source
Uiverse ↗
Author
Quezaquo
Licence
MIT

Loading…

Code

<div class="container">
        <button class="btn">
          <div class="btn-text default">EXPLORE..</div>
          <div class="btn-text active">LAUNCH..</div>
          <div class="spaceship1">
            <svg viewBox="0 0 24 24" height="22" width="22" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
          </div>
          <div class="spaceship2">
            <svg viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
          </div>
        </button>
        <div class="spaceship3">
            <svg viewBox="0 0 24 24" height="40" width="40" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
        </div>
    </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 light 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/Quezaquo/great-ladybug-7 (Quezaquo, MIT).