Hübsche Buttons gestalten mit mehreren Background Gradients (Farbverläufen)



Published
Im heutigen Video zeigen wir dir, wie du fast ganz ohne Hintergrundgrafiken sehr hübsche Buttons gestalten kannst. Wir erreichen das, indem wir mehrere Hintergrund-Farbverläufe (Background Gradients) ÜBEREINANDER stapeln. Das ist mit CSS mittlerweile relativ problemlos möglich und wie genau es funktioniert und was du dabei beachten musst, erfährst du im Video.


Besuche uns ebenfalls auf https://divi-tutorials.com, wo du all unsere Tutorials rund um WordPress und dem Divi Theme finden kannst.

Unseren Stream findest du auf https://twitch.tv/nextab_de, indem wir dir 4 Tage die Woche mehr rund um die Themen Webdesign und Webentwicklung beibringen.
Eine sich gegenseitig helfende Community findest du auf https://divi-tutorials.com/discord und Facebook https://www.facebook.com/groups/divitutorials.

----------
Timestamps:
----------

0:00 - Basic: Einen einfachen Farbverlauf mit CSS erstellen

2:50 - Stapeln von Farbverläufen
https://developer.mozilla.org/en-US/docs/web/css/gradient

3:20 - repeating linear gradient - Wiederholender linearer Farbverlauf
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient

4:28 - radial gradient - Runder Farbverlauf
https://developer.mozilla.org/en-US/docs/web/css/gradient/radial-gradient

7:11 - Button Rahmen mit einer Grafik verfeinern

9:41 - Animation und Änderung der CSS beim Hovern + weitere Tipps
https://css-tricks.com/stacking-order-of-multiple-backgrounds/

----------
Videovorschläge:
----------

Webdesign: MEHRZEILIGER TEXT mit HINTERGRUNDFARBE - 2 beste Methoden:
https://www.youtube.com/watch?v=vbuoF2oFKRk

Best Practices für Responsive Design und Erklärungen von CSS Einheiten:
https://www.youtube.com/watch?v=GdGkfYJLgKE

----------

Das Divi Theme*: https://divi-tutorials.com/divi_y
Die Divi Cloud*: https://divi-tutorials.com/divi_cloud
Unser Webhost*: https://divi-tutorials.com/all-inkl_y
Konto für Selbständige*: https://divi-tutorials.com/kontist_y
Unser Tipp für E-Mail-Marketing*: https://divi-tutorials.com/activecampaign_y

----------------
Die Musik im Clip stammt von Andrew Applepie, einem Berliner Künstler, den ihr hier unterstützen könnt: https://www.patreon.com/andrewapplepie/

Alle Links, die mit einem * vermerkt sind, sind Partner oder Affiliate-Links. Durch das Klicken dieser Links unterstützt du uns und ggfs. bekommen wir einen geringen Anteil, wenn du ein Produkt oder Dienstleistung kaufst. Bei dir fallen keine Extrakosten an.
Category
Web design
Be the first to comment