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