Button Problem ?

[LoMo]

Hi,

ich hätte mal ne Frage ich hab schon oft gelesen bzw. auch schon ein tutorial durchgearbeitet, in den erklärt wird wie man richtig schöne 3D Buttons erstellen kann. Hab des aber irgendwie nicht so hinbekommen.

Eigenschaften, die der Button haben sollte:

Hintergrundfarbe: #BAE1F7
beim mouseover Hintergrundfarbe: #E0F2FF
Schriftart: Arial
Schriftgröße: 14px

Sie sollten 3D sein bzw. so ausschauen.

Kann mir jemand vielleicht anhand von den Daten mal einen erstellen + kleine Beschreibung. Würde mich rießig darüber freuen.

Vielen Dank schon mal

Ps. Hier der Link von den ich es mal versuchte habe: HIER

mfg lomo

 

[saschaf]

Du musst eigentlich nur den Border anpassen. z.B.:

border-left: 1px solid # "etwas heller als Hintergrund"
border-top: 1px solid # "etwas heller als Hintergrund"
border-right: 1px solid # "etwas dunkler als Hintergrund"
border-bottom: 1px solid # "etwas dunkler als Hintergrund"

Farben die gut aussehen musst du selbst mal probieren.

2. Möglichkeit: Hintergrundbild.

 

[c2uk]

Was genau verstehst Du denn auf der von Dir angegebenen Seite nicht?

Alles was bei .navBar a steht wird im normalen Zustand angezeigt, und .navBar a:hover definiert den mouseover Zustand. Die Hintergrundfarbe wird mit background-color festgelegt, Du musst halt noch die Rahmenfarben anpassen (border-color, top = oben und left = links jeweils gleiche Farbe, bottom = unten und right = rechts auch die gleiche Farbe), border-width bestimmt die Rahmengröße. Das padding bei .navBar a:hover versetzt die Schrift etwas nach rechts und unten; und in Kombination mit dem ändern der Hintergrundfarbe, der Rahmeneigenschaften und dem ändern beim mouseover entsteht dieser 3D Effekt.

Die Schriftart und Schriftgröße sollte in etwa so aussehen:

a { font: 14px Arial, Helvetica, sans-serif; }

Versuch es mal, bau es in Deine Seite ein, und wenn dann Probleme hast, kannst gerne wieder fragen, am besten Du hast dann eine Onlineversion zur Hand.