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

<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.

.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.