JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<button>Jetzt anmelden!</button><br>
<button>Jetzt anmelden!</button>

CSS

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

:root {
    --bg-color: #fff;
    --font-color: #2E3746;
    --transition: all 0.2s;
}

button {
    position: relative;
    background: var(--bg-color);
    color: var(--font-color);
    border: 3px solid var(--font-color);
    padding: 2rem 2.5rem;
    font-size: 2rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    margin-bottom: 37px;
}

button::before,
button::after {
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    content: ' ';
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

button::before {
    background: var(--bg-color);
    top: 100%;
    right: 40px;
    width: 40px;
    height: 35px;
    border-left: 3px solid var(--font-color);
    -webkit-clip-path: polygon(0px 0px, 100% 0, 0 100%, 0 0);
            clip-path: polygon(0px 0px, 100% 0, 0 100%, 0 0);
}

button::after {
    bottom: 0;
    right: 35px;
    width: 55px;
    height: 0;
    border-bottom-color: var(--font-color);
    -webkit-transform: rotate(-40deg) translate(-12px, 17px);
        -ms-transform: rotate(-40deg) translate(-12px, 17px);
            transform: rotate(-40deg) translate(-12px, 17px);
}

button:hover {
    background: var(--font-color);
    color: var(--bg-color);
}

button:hover::before {
    background: var(--font-color);
}