Ein Button mit Slide In Hover Effekt programmieren (Nur CSS und HTML) [Anleitung / Tutorial]

Man sollte ja regelmässig was neues ausprobieren und aus diesem Grund veröffentliche ich in nächster Zeit regelmässig neue CSS Tutorials auf Youtube.

Mein Youtube Kanal findet ihr hier.

Der Anfang macht ein kleines Tutorial wo ich einen einfachen Button mit einem einfachen Hover Effekt machen werde – dieser Effekt kommt von Links rein und geht dann weiter. Ist also nicht der normale Hover – zack rein – zack raus 🙂 sondern hat ein paar schöne Effekte drin.

Ich hoffe euch gefällt es 🙂 also schaut rein.

HTML Code

<a href="#">Button</a>

HTML Code

a {
        position:relative;
        padding: 20px 40px;
        font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
        border: 2px solid #475a6d;
        font-size: 2em;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        letter-spacing: 4px;
        transition: 0.5s;
    }
    a:hover {
        color: #475a6d;
        
    }
    a:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #475a6d;
        z-index:-1;
        transform-origin: left;
        transition: transform 0.2s ease;
        transform: scaleX(1);
    }
    
    a:hover:before {
        transform-origin: right;
        transition: transform 0.2s ease;
        transform: scaleX(0);
    }