Cooler Button Design mit Wisch Effekt

Eines der wohl wichtigsten Elemente auf einer Webseite sind die Buttons / Links und dazu muss ich wirklich nichts mehr sagen.

Es ist auch kein Geheimnis, dass ich CSS liebe und darum spiele ich gerne mit neuen Effekten bei Buttons herum.

Heute möchte ich euch so ein kleines Experiment zeigen. Wenn man dieses Design einbaut, dann sieht man so einen kleinen Wisch-Effekt (nicht chinesisches Wish).

Video

HTML

:root {
        --bg: #1e7c81;
        --base: #2d1353;
        --hover_bg: #602caf;
        --hover_schriftfarbe: #fff;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: var(--bg);
      }
      .button {
        padding: 1em 2em;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        letter-spacing: 5px;
        text-transform: uppercase;
        cursor: pointer;
        color: var(--base);
        transition: all 1000ms;
        font-size: 15px;
        position: relative;
        overflow: hidden;
      }

      button:hover {
        color: var(--hover_schriftfarbe);
        transform: scale(1.1);
      }

      button::before {
        content: "";
        position: absolute;
        left: -50px;
        top: 0;
        width: 0;
        height: 100%;
        background-color: var(--hover_bg);
        transform: skewX(45deg);
        z-index: -1;
        transition: width 1000ms;
      }

      button:hover::before {
        width: 250%;
      }

CSS

<button class="button">Hover mich</button>