Text-Button

in einem Form soll ein Button wie ein Text aussehen:

mit diesem CSS sieht das auch schon fast gut auch:

.btn
{
border: none;
background: none;
margin: 15px 0 0 70px;
font-size: 11px;
color:#555;
text-align: left;
width: 125px;
}

leider zeigt der Text damit noch immer den Button-typischen "Drücken-Effekt". Kann ich den ausschalten? Wie?

Hallo,

ich glaube nicht das man den Button-typischen Klickeffekt entfernen kann. Wieso nimmst du nicht einfach einen Link?

VlG

RandomAccess85 schrieb:

Hallo,

ich glaube nicht das man den Button-typischen Klickeffekt entfernen kann. Wieso nimmst du nicht einfach einen Link?

VlG

Die Aufgabe verlangt mehrere Buttons in einer Form, weil ich keine andere Möglichkeit habe, mehrere Parameter über Seiten zu übergeben. Sessionvariablen dürfen nicht verwendet werden.

Würde ein Bild auch den Button-typischen Klickeffekt hinterlassen oder gibts vll. doch eine Lösung?

Hallo,

Man kann mit ein bisschen Javascript simulieren und dem Link sagen, dass er Button spielen soll (je nach Aufgabe des Buttons). Alternativ kannst du

<image type='image' src='hier/dein/bild.gif' />

verwenden.
Allerdings hat das den gleichen Effekt wie die Benutzung eines Links.

VlG

Nico D.

Warum probierst du's nicht einfach damit:

<input type="submit" name="feldname" value="Button 1 geklickt" class="btn btn1">
<input type="submit" name="feldname" value="Button 2 geklickt" class="btn btn2">

Und dann kannst du btn allgemein sowie per btnX die einzelnen Schaltflaechen naeher designen - mit Hintergrundbildern z.B.

Warum stoert dich ueberhaupt der "Klick-Effekt"? Der ist ja nicht umsonst geschaffen worden.

Edit: Ansonsten fiele mir jetzt ausser Javascript nur noch das hier ein:

div.btnbg {
    position: relative;
    background: none;
    border: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}
div.btnbg input.btn {
    position: absolute;
    background: none;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

Und dann:

<div class="btnbg">Button 1<input type="submit" class="btn"></div>

Aber dann kannst du den Buttons keine Werte mehr geben. Hab ich auch nicht getestet, aber eigtl. muesste das so hinhauen.

Funktioniert leider nicht. Noch jemand eine Idee?

BasicMan01

<style type="text/css">
.btn
{
border: none;
background: none;
margin: 0px;
padding:0px;
font-size: 11px;
color:#555;
text-align: left;
width: 125px;
} 

.parent
{
	padding-left:50px;
}
</style>

<div class="parent">
	<input name="pwv" type="submit" class="btn" value="Passwort vergessen?" /> 
</div>

bei deiner bisherigen Klasse padding und margin auf 0px setzen. Die Abstände dann mit einer übergeordneten Klasse regeln.
(getestet im Firefox)

Hallo,

im IE ist der "Klickeffekt" trotzdem noch vorhanden. Es ist nunmal ein Button und trotz aller Bemühungen wird es ein Button bleiben.

Ich verstehe immer noch nicht was gegen die Verwendung eines einfachen Links spricht? Vielleicht solltest du uns nochmal genau erklären wieso es unbedingt ein Button sein muss?!

VlG

RandomAccess85 schrieb:

Hallo,

im IE ist der "Klickeffekt" trotzdem noch vorhanden. Es ist nunmal ein Button und trotz aller Bemühungen wird es ein Button bleiben.

Ich verstehe immer noch nicht was gegen die Verwendung eines einfachen Links spricht? Vielleicht solltest du uns nochmal genau erklären wieso es unbedingt ein Button sein muss?!

VlG

Ich habe eine Paging-Klasse gebaut, die sehr viele Suchergebnisse google-ähnlich seitenweise anzeigen kann. Suchbegriff, Benutzer- und andere Informationen müssen auf der Seite mitgeführt werden. Da dachte ich halt an ein Formular mit mehreren Button ..

Hallo,

na dann übergib die Parameter in der URL
meinlink.de/?suchbegriff=test&usw...

VlG

RandomAccess85 schrieb:

Hallo,

na dann übergib die Parameter in der URL
meinlink.de/?suchbegriff=test&usw...

VlG

Nein, nein, dann hätte ich unzählige Links, jeder einzelne mit einem Rattenschwanz Parameter. Ich will auch meine Methoden nicht ellenlang breitreden, sondern nur wissen, wie der Button-typische "Drücken-Effekt" ausgeschaltet werden kann. Nicht mehr, aber auch nicht weniger.

Hallo,

ok, dann sag ich nun zum dritten mal, dass das nicht möglich ist und du auf andere Mittel umsteigen musst! Als Beispiel wurden <input type="image" /> und <a> genannt.

VlG

BasicMan01

Noch ein kleiner Test ab HTML4.
Hab ich getestet für IE8 und Firefox

<style type="text/css">
	button
	{
		background: none;
		margin:0px;
		padding:0px;
		font-size: 11px;
		color:#555;
		text-align: left;
		width: 140px;
		position:relative;
		border: none;
	}

	button span { position:absolute; }
</style>

<form action="" method="get">
	<button name="b" value="foo">&nbsp;<span>Passwort vergessen?</span></button>
</form>

Das Leerzeichen zwischen button und span soll lediglich dafür sorgen, dass man
mit sich nicht mit Höhenangaben herumärgern muss.

BasicMan01 schrieb:

Noch ein kleiner Test ab HTML4.
Hab ich getestet für IE8 und Firefox
<style type="text/css">
	button
	{
		background: none;
		margin:0px;
		padding:0px;
		font-size: 11px;
		color:#555;
		text-align: left;
		width: 140px;
		position:relative;
		border: none;
	}

	button span { position:absolute; }
</style>

<form action="" method="get">
	<button name="b" value="foo">&nbsp;<span>Passwort vergessen?</span></button>
</form>
Das Leerzeichen zwischen button und span soll lediglich dafür sorgen, dass man
mit sich nicht mit Höhenangaben herumärgern muss.

Funktioniert weder mit dem IE8 noch mit dem Opera 10.53 - anderen Vorschlag?

BasicMan01

Habe nun folgende Klasse noch angepasst.

button span { position:absolute; top:0px; left:0px; }

Damit habe ich BEI MIR erreicht, dass in Opera, Firefox und IE8 der Klick-Effekt des Buttons verschwindet.
Wenn bei dir etwas nich funktioniert, dann reicht die Aussage "funktioniert leider nicht" nicht aus. Vorallem, weil man nicht weiß, ob du irgendwas angepasst hast.