Der coole mit Icon animierte Button mit GSAP

Die meisten Buttons im Web verwenden einen einfachen Hover-Effekt. Doch heute machen wir etwas anderes: einen Button, der garantiert auffällt!

Anstatt die Animation bereits beim Hover auszulösen, starten wir sie erst nach dem Klick. Dabei erscheint ein Icon, das von links nach rechts über den Button läuft. Erst wenn die Animation abgeschlossen ist, wird der eigentliche Link aufgerufen.

Das Ergebnis? Ein interaktiver Button, der nicht nur optisch etwas hermacht, sondern auch richtig Spass macht.

Natürlich könnt ihr auch andere Icons verwenden und diese mit weiteren Animationen kombinieren. Aber schon ein kleiner LKW, der über den Button „fährt“, ist ein echter Hingucker – und gerade für einen Online-Shop eine kreative Möglichkeit, Aufmerksamkeit zu erzeugen.

Die Möglichkeiten sind nahezu unbegrenzt. Probiert es selbst aus!

Video

HTML

<div class="button-container">
      <div class="cart cart-img">
        <img src="truck-solid.svg" alt="Lieferwagen" />
      </div>
      <a href="https://www.chefblogger.me" class="btn" id="buyBtn">jetzt kaufen</a>
    </div>

CSS

:root {
  --bg: #f2e8cf;
  --btn_text: #fff;
  --btn_bg: #bc4749;
  --btn_bg_hover: #a7c957;
  --btn_bg_hover_text: #000;
  --btn_border: #2c0092;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-family: "Georgia", serif;
}

.button-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cart {
  position: absolute;
  top: -32px;
  left: 0;
  width: 100%;
  height: 28px;
  opacity: 0;
}

.cart-img img {
  display: block;
  width: 28px;
  height: 28px;
}

.btn {
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--btn_text);
  background: var(--btn_bg);
  border: 1px solid var(--btn_border);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.btn:hover {
  background: var(--btn_bg_hover);
  border-color: var(--btn_bg_hover);
  color: var(--btn_bg_hover_text);
}

GSAP

const buyBtn = document.getElementById('buyBtn');
const cart = document.querySelector('.cart');

buyBtn.addEventListener('click', (e) => {
    e.preventDefault();
    const href = buyBtn.getAttribute('href');

    gsap.set(cart, { x: -12, opacity: 0 });
/* x startpunkt*/
    const tl = gsap.timeline();
    tl.to(cart, {
        opacity: 1,
        duration: 0.3
    })
    .to(cart.querySelector('img'), {
        x: 180, /* weg des icon */
        duration: 1.2,
        ease: 'power1.inOut'
    })
    .to(cart, {
        opacity: 0,
        duration: 0.3,
        onComplete: () => {
            window.location.href = href;
        }
    });
});