HomeНаука и техникаRelated VideosMore From: techPunkt

Buttons und Farbe in CSS + HTML | Grundkurs für Anfänger #3 deutsch

781 ratings | 38615 views
CSS lernen - A bis Z. In diesem Tutorial lernst du CSS vom Anfang bis zum ende. Viel Spaß! In diesem Video zeig ich dir wie du einen Button mit Farbe gestalten kannst. Zur Playlist vom gesamtem Tutorial: https://www.youtube.com/watch?v=yBFE7Kcpb2k&list=PL5jhqWqcHcSLY1L3plznN7cXr4zteVbXL Zum HTML Basic Tutorial: https://www.youtube.com/watch?v=1A1D2bCcBX8&list=PL5jhqWqcHcSJO4by0xswBe-QTPb6fYVpR Musik: Bensound (http://www.bensound.com/) Andrew Applepie (https://andrewapplepie.bandcamp.com/) Sound Effekte: http://www.freesfx.co.uk/
Html code for embedding videos on your blog
Text Comments (122)
Tomislav Kojic (1 day ago)
Ich finde die Tutorials sehr einfach erklärt, was immer gut ist ^^. Wie viele Editoren hast Du denn bis jetzt ausgiebig getestet, weil Du ja am Anfang Notepad ++ und jetzt Bracket empfiehlst?! Würde den Leuten aber auch zeigen wie man sowohl .css als auch .js Files aus Unterordnern sowie CDN´s aus dem Internet ins HTML einbindest. Zumindest bei uns auf der Arbeit, werden diese Files immer getrennt^^. Ansonsten weiter so!
Brotis (1 month ago)
Wie kann ich mehrere Zeilen Text in einem Button machen? :) Sehr gutes tutorial!
Dextar Unleashed (1 month ago)
Weiter so bitte. Sehr sympatisch man hört dir gerne zu und man lernt das was du erklärst sehr gut!
MadRider (1 month ago)
Weiß jemand wie man diese blaue Umrandung wegbekommt die man kurz sieht nachdem man den Button geklickt hat?
Ju Kl (3 months ago)
Ich gehe auf ein Kolleg für Erwachsene und habe mich ohne jegliches Vorwissen für Informatik eingetragen. Wir haben bereits eine Website abgeben müssen, die ich zu Hause aus einem Flickenteppich aus aus dem Unterricht Aufgeschnapptem und durch Nachhilfe von Freunden ergatterten, zusammengeflickten "Vokabeln" geschustert habe. Morgen schreiben wir aber die Kursarbeit über html und css (Quelltextkorrektur und Webseitennachbau). Unsere vorige Arbeit haben wir aber noch nicht korrigiert. Somit habe ich eine Nachtschicht eingelegt (jetzt erst Luft ;) ) und du hast mir meine Nacht und die Liebe für den Informatikkurs geretten :D. Jetzt habe ich keine Sorge mehr! Ich danke dir so sehr!
Ole Schildt (3 months ago)
Ich dachte einen Button erstellt man mit <form ...> </form>
Pierre-Leon Polte (4 months ago)
Der Ziegenbart ist am start!
Fanar Fanar (4 months ago)
Danke, ich würde mich auf mehr freuen.
Don Bulls (5 months ago)
wie heißt "rel" ausgeschrieben? Leider funktioniert bei mir der "box-shadow" im button:hover nicht....kann irgendjemand helfen?
A Holz (4 months ago)
Rel = relate, es "bezieht" sich also auf etwas, in dem Fall auf das style Sheet 🙂
Tetra Phobie (5 months ago)
deinen videos sind der hammer danke danke danke
ByClient (7 months ago)
Darf ich eine ähnliche Version des Buttons auf meiner Website benutzen?
Wentox (9 months ago)
Weiß wer wie ich diesen HTML Text selber färben kann? Wäre ziemlich hilfreich weil ich auf unterer Website eine Unsichtbare Anleitung beschreiben will/werde und bunt wäre es viel besser. Danke für eure Hilfe und Bemühungen mfg Ben
So geht Front End (7 months ago)
Konntest du eine Lösung finden? Text färben kannst du mit der color property. Schreib mir gerne eine Nachricht wenn du Hilfe benötigst :)
Thomas Kahr (10 months ago)
Kann mir jemand sagen was an dem on click event verboten sein soll? Wer soll das verbieten und warum? Also ich kann dbzgl nichts finden im Netz. Und vor allem wenn es verboten sein sollte warum keine genauere Erklärung und Info bzgl Alternative?
So geht Front End (7 months ago)
Es ist nicht verboten sondern eher bad practice. Grundsätzlich sollte man markup (html), style (css) und funktionalität (javascript) voneinander trennen, also in eigene Dateien packen. Meine Empfehlung ist für Buttons eher einen a Tag zu benutzen und diesen zu stylen. Ich lade hierzu ein Video hoch. das button element wird von den Browsern unterschiedlich dargestellt. (z.B. iOS Safari). Es ist einfacher einheitliches styling von buttons mit a tags zu machen. Das funktioniert außerdem dann auch mit deaktiviertem JavaScript zum Beispiel.
GotPlay (11 months ago)
bin ich zu späht fürs gewinn spiel??? schade
Matthias Tz (11 months ago)
Super starke Videos, vielen Dank!!
tractor (11 months ago)
wenn man mit der Maus drüber fährt bleibt aber der alte Rahmen sichtbar, wie man im Video sieht. Finde ich jetzt nicht so toll (oder ist das ein bug bei dir...?) :)
Nirupama Grzeskowiak (1 year ago)
super videos, vielen Dank!
Ibo Oezkan (1 year ago)
Ein noch besserer Editor ist Visual Studio Code link ist hier : https://www.heise.de/download/product/visual-studio-code-96653/download
Just Rize (1 year ago)
also bei mir geht grand hotel einfach so und ich habs net installiert
Robert Hauss (1 year ago)
Danke für dieses Video, werde ich gleich mal ausprobieren. Mfg Robert
Zorian (1 year ago)
Warum sollte ein Button der zu einer Verlinkung führt verboten sein.
Zorian (1 year ago)
Videobeginn 01:30 davor blbla danke für eure Unterstützung, Gewinnspiel das schon vorbei ist und das wir die beste Communtiy sind
7Grubby7 (1 year ago)
Hey, weiß jemand wie ich das mache, wenn ich noch nen 2. Button mache, welcher aber nicht den gleichen style wie Button 1 haben soll?
Lukas (1 year ago)
verschiedene klassen anlegen
Rebounter (1 year ago)
Du verdienst viel mehr Aufmerksamkeit..
Cyrus21061991 (1 year ago)
Leider funktioniert bei mir das mit dem button:hover nicht. Habe es in verschiedenen Browsern ausprobiert, aber der Button zeigt überhaupt keine Regung. Ich weiß nicht weiter, kannst du mir helfen? Übrigens vielen liebe Dank für deine tollen Videos, es macht echt mega Spaß, du machst das klasse. Gruß.
Marlon Trülzsch (1 year ago)
Bei mir funktioniert der Schatten einfach nicht egal was ich mache.
matthiscraft05 (1 year ago)
Mittlerweile gibt es sogar von google einen colorpicker googlet einfach colorpicker :^)
Daniel Schaller (1 year ago)
Würdest du jedes Mal wenn du erwähnst, dass du etwas nicht erklären willst, es in kurzen Stichpunkten zum groben Verständnis zu erklären... Dann würde es auch nicht den Rahmen sprengen. Und kürz doch in Zukunft deine Einstiege ab. Außerdem, was soll der Mist, dass du permanent auf Varianten eingehst "die man nicht benutzen sollte, veraltet sind, oder evtl sogar gar nicht erlaubt"? Ich will nicht wissen wie ich falsch programmiere, damit irgendetwas raus kommt, was du cool findest, sonder ich will wissen, wie ich zum Ergebnis komme und das auf dem richtigen Weg. Deine HTML CSS Grundkursvideos waren schon relativ ... naja. Aber das hier sprengt echt meine Geduld. Ich habe mehr als das dreifache an PHP Content gelernt und das in der Hälfte der Zeit von 6 deiner Videos.
Slags tainment (1 year ago)
Ich weiß nicht ob du es mittlerweile weißt, aber es gibt auch ein Plugin "Brackets Color Picker" wo du dann in Brackets strg + alt + k drücken kannst und da die Farbe auch individuell einstellen kannst :) oder wenn du ein befehl mit color schreibst z.b. background-color: öffnet sich dieser Color Picker auch automatisch:)
orics (1 year ago)
box-shadow funktioniert bei mir nicht?!
René Zühlsdorf (1 year ago)
onclick ist nicht gern gesehen und wird auch nicht gern verwendet, kann man aber! Besser wäre es mit einer functon... wäre aber hier zu viel des Guten
Rike Sommer (1 year ago)
oh vielen dank .. du hast das echt super erklärt. komischer weise konnte ich den button nicht in die mitte schieben aber auch nicht so schlimm. wollte ich sowieso an der seite behalten! alles andere hat echt super geklappt :D
Zwicku (1 year ago)
Hey du verwendest ja Notepad++, ich hätte für dich ein sehr interessantes Program und zwar Atom lg und danke für deine Tutorials ;D
nasenschnee (2 months ago)
Hi, ich kann Zwicku nur zustimmen. Ich liebe Atom, da du dir diverse packages runterladen kannst. einfach mal "atom top 10 packages" googlen oder hier ein Link: https://dev.to/kazup/top-10-atom-recommended-packages-in-2018-19n7. Z.B. Packages für bessere Übersicht und auch eine live-preview ;)
Mikka p3 (3 months ago)
Ich benutze auch Atom und es ist ein gutes Programm allerdings benutzt er nicht Notepad++ sondern Brackets.
Brackostar (7 months ago)
Visual Studio Code kann ich auch empfehlen :)
Tobias Reichl (1 year ago)
ich bin so cool
Tim Roe (1 year ago)
Beim mir Funktioniert der <link> Attribut nicht kannst du mir vielleicht weiter helfen?
Feli RT (1 year ago)
Beste CSS und HTML Tutorials auf YouTube!
Alois Lemberger (1 year ago)
Danke war super!
DerPfaehler (1 year ago)
Leider weiß ich absolut nicht was ich falsch mache. Jedes mal wenn ich eine Vorschau von meiner Website anschauen will, kommt eine leere seite :( Hab alles haargenau so wie im Tutorial gemacht.
Iris Samedan (1 year ago)
Sehr gut gemacht. Ich werde mir wohl trotzdem eine Befehlsreferenz für CSS und HTML zulegen müssen oder gibt es Web- Alternativen. Mach bitte weiter so und bringe es bitte zu Ende. Bisher wurden die Tuto's irgendwann eingestellt - sehr Schade. Nochmals Danke.
Johann Schley (1 year ago)
Ich kann bei mir den Button nicht in was anderes einbauen. Es wird mit dann nur noch den Text vom Button angezeigt, aber der Button ist nicht da. Was kann ich machen? @techPunkt
Telefisch (1 year ago)
Wie bekomme ich den Schatten jetzt IE-Tauglich hin?Macht irgendwie keinen Sinn dass das Gedöns nur im FF läuft :(
Daniel Kreimer (1 year ago)
Stimme geht ein bisschen vor ;( Sonst Super!!!
XTsunaX (1 year ago)
Vielen Dank! Es war sehr hilfreich!
Irontone 666 (2 years ago)
der schatten funktioniert nicht :( ich hab alles genauso abgetippt wie du es hattest :(
leon wi (2 years ago)
Ich würde Atom Empfehlen
Gleich ichkomme (2 years ago)
Ich bin eh zuspät
JM-KREATIVDESIGN (2 years ago)
beim button die eingabe: color: rgba (250, 0, 0, 0,5); funktioniert bei mir nicht. weder rot noch transparenz, alles andere jedoch über farbcode etc geht aber. habe ausserdem festgestellt, dass der button bei mir nur in farbe zu verändern geht, wenn ich den Farbcode noch über dem padding zu stehen habe. hmm....
leZickzack (1 year ago)
JM-KREATIVDESIGN 0.5 nicht 0,5
Jenni N. (2 years ago)
Wenn ich bei CSS den Befehl "html" gebe, wird dieser schon rot markiert und funktioniert nicht. Hat jemand ne Lösung?
Villynerk (2 years ago)
Danke für die nützlichen Tipps
E- SportWar (2 years ago)
Ich liebe dich :) Spaß.... Ich bin dir super dankbar für deine Videos, hast mir schon oft geholfen!!!
성은진 (2 years ago)
i luv it!
Ben Schindler (2 years ago)
Hammer tutorial, langsam und gut erklärt!
zaky bara (2 years ago)
ist das von javascript nun erlaubt?
Peter Lustig (2 years ago)
Schöner Button :)
Herr Vorragend (2 years ago)
der höchste wert ist 255 . 0-255 = 256. Google das mal, sonst super.
Herr Vorragend (2 years ago)
was genau soll nicht erlaubt sein?
Nanuck Dogg (2 years ago)
0 dislikes!!
RapUnityDE (2 years ago)
f
P. F. Laume (2 years ago)
Rasier dich mal sonst kommt gilette abdi!!!
root (2 years ago)
leider asynchron :(
techPunkt (2 years ago)
+root tut mir leid :/ nächstes Video ist wieder besser ;)
Stan Laurel (2 years ago)
Danke für diese überaus lehrreichen Tutorials!!! Mein Kenntnisstand wächst von Tag zu Tag.
techPunkt (2 years ago)
+Stan Laurel Danke danke, werde es an meinen Designer und Erdenker weiterleiten :)
Stan Laurel (2 years ago)
Ehre, wem Ehre gebührt! Sie sind eine gelungene Mischung aus Information und Praxisteil. Das kommt mir sehr entgegen. Grüße von Baden nach Württemberg. ;-)))
techPunkt (2 years ago)
Freut mich zu hören. Das war mein Ziel ;)
Maximilian Magic (2 years ago)
Habe das genau so gemacht wie du aber der button fliegt nur langsam hoch kommt aber nicht wieder langsam herunter.... button:hover { color: darkcyan; background-color: white; transform: translate(0px, -10px); box-shadow: 0px 30px 10px -10px rgba(0,0,0,0.2); transition: ease-in-out all 500ms; } wo ist der fehler?
Maximilian Magic (2 years ago)
ok danke dir für die antwort
techPunkt (2 years ago)
+Maximilian Magic (LiquidMagic) Hi, du musst den transition Befehl beim Css direkt auf dein Button machen. Also nicht dort wo hover steht sondern das was ohne hover dasteht. Das sollte klappen ;)
Niemals Wieder (2 years ago)
Ich finde es echt Schade das du nicht noch viel mehr Interessenten für deinen Kanal findest deine Tutorials sind echt gut erklärt.... leider gibt es nicht ganz so viele die sich für z.B css oder html interessieren
techPunkt (2 years ago)
+Niemals Wieder mal schauen :D. Hoffe auch das der Kanal wächst
Nico als Wüste (2 years ago)
Hallo, ich würde gern wissen warum es nicht funktioniert wenn ich nur den Button verschieben möchte button{ text-align: center; } wenn ich das so eingebe dann bleibt der button dennoch auf der linken seiter der Hompage.
Just Rize (1 year ago)
html { text-align: center; } muss es sein ;)
Yannic Neßhöver (1 year ago)
Nicoals Wüstner Das Text align steht dafür , dass der Text mittig steht und nicht der Button
Nico als Wüste (2 years ago)
Ein Kollege von mir hat gemeint das ich es mit dem befehl div machen könnte das hat auch funktioniert. Ich habe nun den Button in HTML noch in <div>Button</div> eingefügt. In der css datei habe ich dann die div datei mit text-align zentiert div{ text-alogn: center; }
Nick (2 years ago)
Super Serie! Verständlich erklärt...
WindowsIstSCHEISE (2 years ago)
WINDOOF? Noch ein dummer mehr
Angry Media Smily (2 years ago)
Ohne witz ne , du verdients ne Youtube Pokal. Nicht all diese idioten und bitches die mit ihren rumgetuerei ne goldene nase verdienen .Trauig sowas.Ach noch was , bin 31 und von dir lern ich verdammt viel und und in kurze Zeit in sachen Webdesign TOP TOP
techPunkt (2 years ago)
+TopDüster5 Freut mich das zu hören :)
Jonathan Wettcke (2 years ago)
cooles tutorial ich lerne so schnell mit den tutorials
techPunkt (2 years ago)
+bxnxls oh, danke :D
nils. (2 years ago)
Druck mal während du den cruser über nem Hex Code oder so hast Ctrl und e ;) nur so nen Tipp
techPunkt (2 years ago)
+Ableton Zero super Hammer :D
Alexander S. (2 years ago)
Hey, schönes Video! Für die Farbauswahl gibt es in Brackets noch ne coole Funktion. Wenn du mit dem Cursor in deinen Farbcode bist (also zB. in #b40431) und Strg + E drückst öffnet sich ein Farbmischer. Probier es mal aus ;)
Alex K (2 years ago)
Grüß dich! Wirklich gute Videos. Weiter so! Eine Frage an dich: gibt es mehr Konstanten im CSS um Text zu formatieren außer Tag <p>. Wenn man z.B. mehrere Texte hat und diese formatieren möchte und der <p> Tag schon besetzt ist bzw. anders formatiert ist??? Danke!
Yvonne B. (1 year ago)
Falls du keine Lust hast das video zu gucken, hier eine ganz kurze Zusammenfassung. Du kannst einzelne Objekte des html scripts entweder zu gruppen zusammenfassen oder einmalige IDs vergeben. Diese kannst du dann ganz einfach im css ansprechen. ein Beispiel, nur ein Paragraph soll in der Mitte stehen: Html: <p id="txt">Hello. Welcome to my Homepage.</p> css: <style> #txt { text-align: center; } </style> wenn du mehrere zu einer Gruppe zusammenfassen möchtest (also z.B. Paragraph 1, Überschrift 3 und Paragraph 4) setzt du an jeden der Objekte anstelle des "ID" einfach ein Class <p Class="Gr1">iwdfbwevfhb</p> und anstelle des # im css verwendest du ganz einfach einen Punkt. .Gr1{ text-align:center; }
Oskar Zechner (2 years ago)
nices Video hättest mehr abos verdient!! hänge zwar etwas bei deinen videos hinterher aber das hol ich schon auf
Kilian Stisser (2 years ago)
Super :D
root (2 years ago)
brackets dauert bei mir ja eeeeeeeeeeeeeeeeeeewig zum installieren.. schon über 4 stunden derzeit.. hatte das jemand auch?
Karen Köhler (2 years ago)
Super erklärt, gute Tipps, vielen vielen Dank.Eine kleine Anmerkung: rgb ist nicht rot, grün, blau sondern rot, gelb, blau. Einen schönen Abend noch und weiter so.
Robert Hauss (1 year ago)
rgb steht für red green blue Versuch doch mal rgb(0, 100%, 0) als Farbe. Mfg
Mal N (2 years ago)
Falsch, in der additiven Farbmischung ist es rot grün blau. Halte doch einfach mal eine Lupe an deinen Bildschirm und du wirst die vergeblich einen gelben Pixel suchen. MfG
Michael Klemm (2 years ago)
sehr informatives video :)
Butterfly Tricks (2 years ago)
Super Videos und gute Hilfe ,
ajdncjwjdjd (2 years ago)
Denkst du, dass es nicht legal ist, weil man JavaScript in HTML einbindet oder, weil man Google verlinkt (also nicht deine eigene Website). Ich weiß jetzt nicht genau wie ich danach googeln soll.
Ilopy (2 years ago)
Hallo, für ein Schulprojekt muss ich einen internen link da einfügen, was bei mir nicht funktioniert. Kannst du mir da vllt helfen? :)
Ilopy (2 years ago)
+Mac Jo Danke :)
Dog. (2 years ago)
Richtig geil hilft perfekt zum lernen :D
Ju Lia (2 years ago)
brackets fand ich anfangs gut, benutze jetzt dreamwiever. brackets hat ständig alles durcheinander geworfen bei mir :( trotzdem gutes programm
Ju Lia (2 years ago)
cool, weiter so videos
Ri cky (2 years ago)
hi, mich interessiert was dein Beruf ist?
Gamelife (2 years ago)
Hi, Finde deine Html /Css Reihe richtig gut. Außerdem ist deine Reihe zum perfektem Zeitpunkt rausgekommen, da wir jetzt in der Schule mit diesem Thema anfangen. Ich würde mich sehr über denn Gewinn freuen, da der Laptop von mir noch auf Windows Vista läuft und das Betriebssystem bald nicht mehr unterstützt wird:( Deine Videos: Top :)
Hüseyin Yüksel (2 years ago)
Hey Mac Jo würde mich sehr freuen wenn ich der Gewinner werden würde. Ich verfolge schon lange dein Kanal und schaue fibernd deine Videos. Ich bekomme bald mein Computer den ich selber zusammen bauen werde und mir fehlt dazu die Lizenz. Außerdem wollte ich sowieso die Windows 7 Version da meine Erfahrungen mit Windows 10 nicht so schön waren. Wieder einmal sehr gelungenes Video und ich freue mich schon auf die darauf folgenden. LG Hüseyin
nick (2 years ago)
Freut mich, dass Dir das Brackets gefällt! Leider konnte ich nur das Video kurz mit Vorspulen anschauen, da es gleich in den Heidepark geht. Mach weiter so, Videos gefallen mir echt sehr gut. Schaue mir das ganze Video dann am Sonntag an. Mit der Windows 7 Lizenz kann ich leider nichts anfangen, weßhalb ich meine Chance lieber nem anderen überlasse. Kann mann auf dem PC nicht eine virtuell Machine istallieren, dann windows 7 mit dem Key und wenn man das dann Upgradet, ist der key Win10? Oder bleibt der key für windows 7? Viele Grüße, Nick
Tapout! (2 years ago)
Hey Top Videos, weiter so :) Viele Grüße aus Albstadt ;-)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.