✔ Button mit besonderen Rändern

[Lehmkuhler]

Hallo erstmal!
Ich hab da mal ne Frage:

Wie erstelle ich so ein Button in CSS?


Wie ich so ein Button erstell weiß ich schon?


Mir geht es besonders um den 2. Strich links!

Hier mal die CSS dazu:
#avmenu A{
PADDING-RIGHT: 0px;
DISPLAY: block;
BACKGROUND: #223f6a;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #6898d0 4px solid;
BORDER-RIGHT: #6898d0 1px solid;
BORDER-BOTTOM: #6898d0 1px solid;
COLOR: #FFFFFF;
PADDING: 5px;
margin-left: 6px;
WIDTH: 231px;
}

 

[Maik]

Hi,

die einfachste Lösung, die mir da spontan einfällt, wäre eine entsprechende Grafik, die als Hintergrundbild eingebunden wird.

 

[Lehmkuhler]

Danke für deine schnelle Antwort, aber die Idee ist mir auch schon gekommen.
Ich möchte nicht mit grafiken arbeiten, weil ich die komplette Sete so klein wie möglich gestalten möchte. (Dateigröße)

 

[Maik]

Okay, hier ein "grafikfreier" Lösungsvorschlag:

a {
display: block;
background: #223f6a;
border-left: #6898d0 4px solid;
border-right: #6898d0 1px solid;
border-bottom: #6898d0 1px solid;
color: #FFFFFF;
margin-left: 6px;
width: 231px;
}

a span {
display: block;
margin-left: 1px;
padding: 5px 2px;
border-left: #6898d0 4px solid;
}

<a href="#"><span>link</span></a>

 

[Lehmkuhler]

Danke für deine Hilfe.
Genau so habe ich mir es vorgestellt.