Warum ist dieser Button so cool?! [DE/Tutorial]

In diesem Video geht es um die Möglichkeiten die, dir Multifunktions Button bieten können mit JavaScript und CSS. Ich zeige dir in diesem Tutorial den Aufbaut, Möglichkeiten und Funktionen eines solchen Button.
Du brauchst einen Hoster?
🧡 bit.ly/mein-hoster (Affiliate Link)
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
Unterstütze den Channel:
🧡 Notizen & ToDo: affiliate.notion.so/qa91a3px0ahk (Affiliate Link)
🧡 Adobe Creative Cloud: prf.hn/l/QxRnVXD (Affiliate Link)
🧡 Meine UI Design Tool: prf.hn/l/pmZdNJ9 (Affiliate Link)
🧡 Musik die ich Nutze: bit.ly/MeineHintergrundMusik (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFreelanceKonto (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskUnleashed (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 CZcams Mitgliedschaft: bit.ly/CZcamsSupporter (Affiliate Link)
Links aus dem Video:
► Live Demo: codepen.io/Unleashed-Design/p...
► VSC Theme: bit.ly/VisualStudioCodeTheme
► IDE Tutorial: • Neue Basic Web Dev IDE...
#tutorial #webdevelopment #webdesign
Meine Social Media Seiten:
► Homepage: unleashed-design.de/?...
► CZcams: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Copyright by Johannes Schiel / Unleashed Design

[@Linuxdirk]

Richtig coole Buttons! Ich hoffe, so etwas mal irgendwo auf einer Seite zu sehen! Das Video selbst ist natürlich wieder on-point! 👍

[@moritzdeiaco2798]

Ich bin einfach nur komplett geschockt wie coole Videos du machst... Hab mir jetzt einige deiner Videos angesehen und kann mit überzeugung sagen: "Du bist der deutsche Fireship des Webdesigns" 👍👍

[@UnleashedDesign]

Danke freut mich sehr das dir meine Videos so gut gefallen :)

[@dimitridovgan6364]

I like! Danke für das Video!

[@UnleashedDesign]

Danke :) freut mich wenn es dir gefällt.

[@fransenson]

Starkes Video! Nur eine Anmerkung, weil ich es schon in ein paar Videos gehört hab jetzt: Children, nicht childs. :D Danke für den Content und weiter so!

[@UnleashedDesign]

Danke freut mich wenn dir das Video gefallen hat. @Childs deswegen sind meine Videos auf Deutsch und nicht auf Englisch :D

[@chrizzzly_hh]

Schoenes video wie immer! Ich glaube fuer einige viewer waere es gut, wenn du auch das thema a11y (accessibility) mehr behandelst - wie nutzt man aria-attribute bei sowas korrekt? Wie funktioniert tab-index und focus order? Was hat es mit allgemein damit auf sich?
Genau weil so viele leute enterprise anwendungen gestalten ist es wichtig!

[@UnleashedDesign]

Werde ich mir mal in den Backlog aufnehmen :) danke für das Feedback

[@mprincehanad]

Ein schönes Video. Können Sie den Filter von GitLab Issues in Angular nachbauen. Das würde mir sehr interessieren. 😊

[@UnleashedDesign]

Danke, werde ich mir mal auf den Backlog schreiben :)

[@PicSta]

Super Tutorial, dennoch habe ich eine Frage zur Usability. Nach Auswahl des Buttons z. B. Thumbs up (Like) klappt der Button nicht wieder zusammen. Kann man irgendwie anpassen, dass es wieder „collapsed“? Wäre echt super!

[@UnleashedDesign]

Das kannst du machen indem du :focus entfernt aber das würde ich persönlich nicht machen sondern erst bei einem erneuten Focus auf ein anderes Element wieder schließen.

[@PicSta]

@@UnleashedDesign Ja beim Klicken außerhalb oder erneutes Tabben schließt sich es bereits. Fühlt sich jedoch irgendwie komisch an, für meinen Geschmack.

[@iTinchen0]

Meine Sorge ist, dass das nicht wirklich schön auf mobile ist, weil ich dort kein Hover habe.

[@UnleashedDesign]

Das sollte kein Problem sein weil Focus in Mobile auch :focus-within unterstützt :) das heißt Focus bei einem "Klick" bzw. Touch im Mobile wird auch alles normal öffnen/schließen

[@iTinchen0]

@@UnleashedDesign aber kollidiert das dann nicht mit dem eigentlichen click Event das auf dem Button liegt? In den Fall zB ein API Call um das ganze auf favorisiert zu setzen.