[Andy26]

Hi,

ich hab ein recht schönes Tutorial gesehen wo es darum ging ein hozizontales Menü zu erstellen dass recht schöne Buttons verwendet. Nun wollte ich fragen wie ich es anstelle, dass ich bei einem normalen Link auch diesen Buttoneffekt nutzen kannt?

Hab schon rumprobiert aber nicht zu laufen gebracht. Hier mal der Code:

.button li {
display : inline;
float : left;
line-height : 10px;
list-style : none;
margin : 0px 0px;
padding-left: 0px;
}
.button li a {
background-image : -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image : -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color : #f4f4f4;
color : rgba(255, 255, 255, 0.8);
display : inline;	
font : bold 12px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;		
outline : none;
padding : 5px 15px;
text-decoration : none;
text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px; 
box-shadow : 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow : 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow : 1px 1px 2px rgba(0, 0, 0, 0.65);	
}
.button li a:active {
background-image : -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image : -moz-linear-gradient(
center bottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}
.button li a.cyan {
color : #4c4c4c;
color : rgba(0, 0, 0, 0.8);
text-shadow : 1px 1px 1px rgba(255, 255, 255, 0.4);
}
.cyan {
background : #23c6de;
border : #23c6de 1px solid;
}
.cyan:hover,.cyan:focus {
background-color : #18d8f4;
}

so füg ich den Button ein:

<ul class="button">
<li><a href="#" class="cyan">Link</a></li>
</ul>

Danke im Voraus!
Mfg, Andy

[Praktikant]

Wie soll das denn am Ende aussehen?

Es hilft nicht viel hier einen kleinen Ausschnitt von Quellcode zu zeigen, den wohlmöglich auch noch aus irgendeinem Tutorial hast...

[Andy26]

Hi,

so sieht es im Momment aus: Klick Hier

Aber ich schaff es nicht das der Button ganz links anliegt, deshalb möchte ich ihn als normalen Link Button machen und nicht als ul Menü

Mfg, Andy

[Webcoder]

Hi Andy26

Zitat von Andy26

Aber ich schaff es nicht das der Button ganz links anliegt, deshalb möchte ich ihn als normalen Link Button machen und nicht als ul Menü

Natürlich liegt der Button nicht ganz links an, die Liste (ul) hat standardmäßig eine Einrückung. Den musst du resetten ebenso wie den List-Style.


Gruß
Webcoder