WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

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

von | Sep 23, 2019 | Technik | 0 Kommentare

Schlagwörter: CSS - 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

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

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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);
    }




0 Kommentare

Trackbacks/Pingbacks

  1. Ein Button mit Slide In Hover Effekt programmieren (Nur CSS und HTML) [Anleitung / Tutorial] | Nikkies Tutorials - […] Quellcode: https://www.chefblogger.me/2019/09/23/ein-button-mit-slide-in-hover-effekt-programmieren-nur-css-und… […]

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert