Wie bekomme ich solche Buttons

[MaxCode]

Hey Leute,

ich beschäftige mich erst seit kurzer Zeit mit der Web-Entwicklung und habe mal eine Frage.
Ich habe bis jetzt mit CSS nur solche Buttons hinbekommen:

Und würde gerne wissen wie man solche Buttons hinbekommt:

Habe schon öfters Buttons in dieser Form gesehen und mich würde es mal interessieren wie man diese macht.

Hoffe jemand kann mir da weiterhelfen!


MFG
Max

 

[Paulomart]

Schau dir mal das an: https://developer.mozilla.org/de/docs/Tools

 

[MiCrJonas]

Ich sehe da keinen großen Unterschied. Vielleicht ist das interessant: http://www.w3schools.com/cssref/css3_pr_border-radius.asp. Und eventuell: http://www.w3schools.com/cssref/sel_hover.asp.

 

[GermanUbuntu]

Du könntest dir mal auch Bootstrap anschauen
http://getbootstrap.com/

 

[MaxCode]

Danke für die ganzen Antworten!
Ich denke Bootstrap ist genau das was ich gesucht habe. Ist mir zumindest beim überfliegen aufgefallen.
Werde mich mal durch alles durchlesen! .

MFG
Max

 

[AnonymusChaotic]

Ich würde es mit
border-radius,
Schatteneffekt (wie auch immer der hieß)
Background-color,
Border:,

probieren.
Der tag dazu müsste <button> sein

 

[MuellerMH]

Wo ich hier grad Bootstrap lese, gibt ein super tool was auch ideal für Einsteiger ist.
Ist ein Bootstrap (BekommWasDuSiehstEditor) der Quellcode ist echt sauber der produziert wird man kann die CSS klassen speichern und und und. Ich nutzte das jetzt seit ner Woche und hab massig Zeit gespaart

http://pinegrow.com/

 

[MaxCode]

Danke für die Info. Sieht aufjedenfall interessant aus. Habs mir auch mal als Lesezeichen gespeichert, aber ich möchte lieber erstmal lernen ohne solche Tools zu arbeiten.
Werde es aber in Zukunft mal testen und wahrscheinlich auch nutzen, aber nicht als so ein großer Anfänger .

MFG
Max

 

[Elrontur]

button {
  padding: 4px 7px;
  background-color: #2ea2cc;
  box-shadow: 0 1px 0 #53b5d9 inset;
  border: 1px solid #0074a2;
  border-radius: 3px;
  color: #ffffff;
}

Passiert nur noch nicht viel, da du keine Hover-Methode vorgeschlagen hast... ^^ Musst du selbst machen. Viel Spaß damit!