Wie programmiert man einen Weihnachts Button mit HTML und CSS?

von | Dez 15, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Webdesign

Inhaltsverzeichnis

Habt ihr euch schon mal gefragt ob es möglich ist einen Button in HTML ein wenig zu verschönern? Und nein ich meine nicht in Grösse, Hintergrundfarbe oder Schriftfarbe – sondern zb mit einem Bild verschönern?

Dann seid ihr heute hier absolut richtig. In diesem Video zeige ich euch, wie ihr ein Bild – wie eine Santa Mütze – beim Bild positionieren könnt und es dann auch gleich animieren könnt?

Der Trick an der Sache ist, das Bild zu animieren wenn ein anderes Element angeklickt wird….

Video

HTML

1
2
3
4
    <div class="container">
        <a href="#" class="button">Weihnachten</a>
        <img src="santa-hut.webp" class="hut">
    </div>

CSS

Also zuerst wird der Stil vom Button definiert und :active ist der Befehl wenn darauf geklickt wird. Darüber wird dann der Hut positioniert und danach kümmern wir uns um den Effekt der Ausgeführt wird – wenn der Button geklickt wird – soll sich das Bild verändern.

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
.button {
        position: relative;
        padding: 8px 16px;
        min-width: 8em;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        border: 1px solid transparent;
        color: #fff;
        background-image: 
    linear-gradient(to bottom, #f12828, #a00332, #9f0f31);
    transition: .2s;
    }
     .button:active {
    transform: scale(.92);
    filter: brightness(.8);
    will-change: transform;
    }
    .hut {
        position: absolute;
        height: 44px;
        margin-top: -25px;
        margin-left: -120px;
        transition: 200ms;
    }
 
    .button:active + .hut {
        transform: scale(.5);
        filter: brightness(.8);
    }

So jetzt wisst ihr also, wie man 2 CSS Befehle miteinander verknüpfen kann.

0 Kommentare

Einen Kommentar abschicken

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