• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS 3 Button Problem

B

Basti225

Neues Mitglied
Hey,
ich versuche zur Zeit einen Button in CSS3 zu coden.
Jetzt möchte ich, das die Größe des Buttons sich automatisch an die Breite des Textes anpasst.
Und der "button1arrow" rechts ist.
Mit text-align klappt das i.wie nicht?!

CSS
Code: 
.button1{
    background:-moz-linear-gradient(top, #128ccd, #0162a9); /***Mozilla Firefox***/
    background:-webkit-gradient(linear, left top, left bottom, from(#128ccd), to(#0162a9)); /***Goolge Chrome, Safari***/
    -moz-border-radius: 4px; /***Mozilla Firefox***/
	-webkit-border-radius: 4px; /***Google Chrome, Safari***/
    padding: 13px;	
	font-family: Verdana, Arial;
	font-size: 16px;
	font-weight:bold;
	color: #e8e8e8;
	height: 18px;
	text-shadow: -1px -1px 0px #666;
}	

.button1arrow{
    background:-moz-linear-gradient(top, #ededed, #cfcfcf); /***Mozilla Firefox***/
    background:-webkit-gradient(linear, left top, left bottom, from(#ededed), to(#cfcfcf)); /***Goolge Chrome, Safari***/
	-moz-border-radius-topright: 4px; /***Mozilla Firefox***/
	-moz-border-radius-bottomright: 4px; /***Mozilla Firefox***/
	-webkit-border-top-right-radius: 4px; /***Google Chrome, Safari***/
	-webkit-border-bottom-right-radius: 4px; /***Google Chrome, Safari***/
    color:#ff0000;
	padding: 13px;
}

HTML
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <p class="button1">
	    Button 1
	<span class="button1arrow">
	    GO
	</span>	
	</p>
</body>
</html>
Gruß Basti
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Was soll dein Button später mal können? Soll der ein Formular abschicken oder soll es ein Link zu einer anderen Seite sein? Momentan ist es keins von Beiden sondern nur normaler Text.
 
Ja,
CSS3 wird ja verwendet ;)
Und da soll ein Text stehen, den kann man ja immer noch verlinken.
Es geht mir aber um das aussehen.
Also das der Button nur so breit ist, wie der Text.
Und halt die Klasse Arrow rechts davon (in dem Button ist)
 
Werbung:
Hallo.

Tut mir leid aber was du verwendest ist kein CSS3.
Das sind nur workarounds für Browser die kein CSS3 beherrschen.

Gruss
Elroy
 
Alles Eigenschaften die mit -moz oder -webkit anfangen gehören keinem Standard an. Das sind wie gesagt Eigenschaften die nur von bestimmten Browsern erkannt und interpretiert werden. Wenn Du CSS3 nutzen willst, dann musst Du diese Eigenschaften ohne diese Kürzel am Anfang angeben - meist zumindest. Schau am Besten nochmal im CSS3-Manual nach.
 
Werbung:
Basti225 schrieb:
Also das der Button nur so breit ist, wie der Text.
Zum Vergrößern anklicken....
Das nötige css hängt auch von den verwendeten html-Elementen ab.
Blockelemente nehmen von Haus aus die größte mögliche Breite an.
Ein "shrink to fit" kannst du entweder über float (left, right), display (inline, inline-block, table-cell) oder position (absolute, fixed) erreichen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben