Projekt: Undertale Buttons mit CSS und JavaScript

Am 17. Juli ist laut meinem Kalender internationaler Tag der Gerechtigkeit ist. Da kam mir Undertale in den Sinn. So ein gutes Spiel!




Ich ziehe zwei Dinge aus dem Spiel für mein Leben:

→ Du hast immer eine Wahl.

→ Und manchmal musst du den Mercy-Button echt mehrmals drücken bevor irgendwas Gutes passiert. Aber das ist der einzige Weg, das gute Ende zu bekommen.






Das Projekt

Entstanden ist dieses kleine Projekt weil ich Undertale echt gerne mag – und weil ich mal wieder was mit CSS und JavaScript anstellen wollte.

Ihre Styles bekommen die Buttons erstmal mit CSS. Ihre Funktion – also dass Nachrichten auftauchen wenn man die Buttons klickt und sich die Icons verändern – erhalten sie mit ein bisschen vanilla JavaScript.


In diesem kurzen Video zeige ich dir den Hover Effekt:




Die Nachrichten, die angezeigt werden wenn man die Buttons klickt, sind aus dem Spiel. Wenn du Undertale kennst, werden dir viele davon sicher sehr bekannt vorkommen:




Sounds familiar?




Erinnerst du dich an diese Szene?


Aber genug gespoilert!




In meiner Pen auf Codepen.io findest du das funktionierende Projekt – bereit zum Ausprobieren!

Am Besten funktioniert Codepen auf der externen Webseite. Diese erreichst du wenn du auf das Edit on Codepen Icon klickst.

See the Pen Undertale Buttons (with messages on click + hover effect) by Marty (@Marty-Development) on CodePen.


Kennst du Undertale und gefällt dir das Spiel?

Was ist für dich die wichtigste Message?

Schreib mir doch einen Kommentar! Die Option findest du am Ende dieser Seite. Ich freu mich auf deine Meinung!


Danke fürs Lesen und für deine Zeit, die du mir damit gewidmet hast! 🙂



→ Veröffentlicht am 03/08/2020 in CSS, Code & Co

→ Schlagwörter: , , , Einloggen um den Post zu editieren.

0 comments on “Projekt: Undertale Buttons mit CSS und JavaScript

    Schreibe einen Kommentar

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