Neuer Button Design mit Lichtblitz Effekt

Ich sage immer, dass Buttons das wohl wichtigste Element einer Webseite sind, denn ein schlechter Button wird übersehen und ein guter Button treibt den CTA in die Höhe. Leider machen viele Webdesigner ihre Buttons meistens sehr langweilig oder sie verstecken sie ganz (Cookie-Banner).

Im Minimum gibt man einem Button Platz zum Atmen und eine klare Farbe – will man besser als die meisten sein, baut man einen Hover-Effekt ein, und wenn man ganz „fancy“ sein möchte, kann man noch coole Effekte einbauen.

Heute zeige ich euch so einen kleinen Effekt, der aber eine grosse Wirkung auf die Besucher hat, und zwar gibt es so einen kleinen „Lichtblitz“-Effekt, der durch den Button saust, wenn man darüber hovert.

Video

HTML

:root {
        --bg-dark: #0a0a12;
        --neon-cyan: #ef476f;
        --neon-magenta: #ffd166;
      }

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

      body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-dark);
      }

      .cta {
        display: inline-block;
        padding: 1.2rem 3rem;

        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--bg-dark);
        background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
        border: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        opacity: 1;
        transition: transform 200ms ease;
      }

      .cta:hover {
        transform: scale(1.05);
      }

      /* Shine effect */
      .cta::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 500ms;
      }

      .cta:hover::after {
        left: 100%;
      }

CSS

<a href="#" class="cta">Weiter</a>