Skip to content

Gallery / buttons / Elastic press button

Elastic press button

Springy press feedback using CSS linear() easing — no JS

buttons intermediate buttonspringeasingpress
Live preview

⚠ Browser support linear() easing needs Chrome 113+, Safari 17.2+ or Firefox 112+; older browsers fall back to a single-overshoot cubic-bezier.

Techniques: linear()-easing · squash-and-stretch · transition · @supports

Customizeupdates preview, code & clipboard
#7F77DD
17px
0.7s
Code snippets/buttons/btn-elastic-press.html 
<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/buttons/btn-elastic-press.html
  Desc   : Springy press feedback using CSS linear() easing — no JS
  ============================================================
-->
<button class="sg-btn-elastic-press" type="button" style="--sg-color:#7F77DD; --sg-size:17px; --sg-duration:0.7s;">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M12 3 L14.6 8.6 L20.5 9.3 L16.2 13.4 L17.4 19.4 L12 16.4 L6.6 19.4 L7.8 13.4 L3.5 9.3 L9.4 8.6 Z" />
  </svg>
  Press &amp; release
</button>
<style>
  .sg-btn-elastic-press {
    appearance: none;
    border: 0;
    font: inherit;
    font-size: var(--sg-size);
    font-weight: 600;
    color: #ffffff;
    background: var(--sg-color);
    padding: 0.75em 1.6em;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transform: scale(1);
    transition: transform var(--sg-duration) cubic-bezier(0.3, 1.75, 0.45, 1);
  }
  .sg-btn-elastic-press svg {
    width: 1.1em;
    height: 1.1em;
    fill: #ffffff;
    opacity: 0.9;
  }
  .sg-btn-elastic-press:active {
    transform: scale(1.08, 0.82);
    transition-duration: 0.08s;
    transition-timing-function: ease-out;
  }
  @supports (transition-timing-function: linear(0, 1)) {
    .sg-btn-elastic-press {
      transition-timing-function: linear(
        0, 0.62 18%, 1.28 35%, 0.92 60%, 1.04 80%, 0.99 92%, 1
      );
    }
  }
</style>

More buttons