Hallo,
mein Kreis ist nun auch rund. Lag daran dass die Grafik nicht viereckig war. Da kann natürlich kein runter Kreis entstehen. Hab nochmals bisschen etwas geändert, was meint ihr? Kommt es meiner Grafik nahe? Kann man es so lassen oder was würdet ihr noch ändern?
http://jsfiddle.net/sweu022f/5/
.telefon {
width:276px;
height:30px;
background-color:#65140a;
border-radius:7px;
}
.telefon p:before {
content: url(http://fs1.directupload.net/images/141207/n8hwqs9w.png);
position: absolute;
margin-top: -20px;
margin-left: -68px;
border-radius: 77%;
background-image: linear-gradient(133deg, white 0%, black 50%);
padding: .6em;
}
.telefon p {
color:#b6c3d0;
font-weight:bold;
font-size:.85em;
letter-spacing:2px;
display:block;
padding:8px 0 8px 7em;
text-transform:uppercase;
}
<div class="telefon">
<p>Rückrufservice</p>
</div>
Aber mal ganz ehrlich. Es wird immer geschrieben mit CSS ist alles viel einfacher. Ob ich dieses mit Gimp nicht einfacher hätte hinbekommen? Schaut mal wie viele Zeilen Code für so ein Button zuständig ist.
Noch eine kleine Anmerkung für das Wiki, warum sind die Beispiel nicht verlinkt? Ist echt umständlich alles erst zu kopieren bei sich einzufügen und schauen wie es aussieht. Nur mal so als Idee.