aus Link einen Button machen mit CSS?

papgia01 · #1 (**permalink**) 23.10.2010, 19:33

Hallo,

ich möchte statt einem Text-Link, eine Grafik bzw. einen Button haben.
Allerdings kann ich nicht viel am HTML-Code ändern (!) und versuche daher eine reine CSS-Lösung zu finden.

Mein erster Versuch war, dem Link eine Hintergrundgrafik zu geben - was auch geklappt hat. Allerdings erscheint dann beides gleichzeitig (der Text-Link erscheint über der Grafik) und das stört natürlich

Mein zweiter Versuch war, dass ich den Text "Ich möchte ein Button sein" weggelassen habe, aber dann ist auch das Hintergrundbild nicht erschienen

Also wie bekommt man einen anklickbaren Button mit diesem HTML-Code hin?

HTML-Code:

<ul class="links">
  <li><a href="http://127.0.0.1/test/1" class="test1">test1</a></li>
  <li><a href="http://127.0.0.1/test/2" class="test2">Ich möchte ein Button sein</a></li>
</ul>

Code:

 .test2 { 
    background-image: url('test2.gif');
 }

heiko_rs · #2 (**permalink**) 23.10.2010, 20:05

Entweder FAQ 15 oder (falls das HTML absolut nicht änderbar ist) den Text per text-indent: -9999px; verschwinden lassen.

papgia01 · #3 (**permalink**) 23.10.2010, 23:39

Danke für den Tip!
Bekomme es trotzdem nicht hin.

hier der komplette Code

HTML-Code:

<html>
<head>
<title>Beschreibung der Seite</title>
<style type="text/css">
 
 .mybuttonclass { 
  background: url('http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_medium_short.gif') no-repeat ;
  text-indent: -9999px !important;
  color:#00ff00;
  overflow:hidden;
  width:150px;
  height: 8px;


 }
ul, ol {list-style:none outside none;}

</style>
</head>
<body>




<ul class="links">
  <li><a href="http://127.0.0.1/test/1" title="test1" 	class="test1">test1</a></li>
  <li><a href="http://127.0.0.1/test/2" title="test2" 	class="mybuttonclass">Connect to Facebook</a></li>
</ul>




</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Definitionsliste in einer Floatumgebung	*pi	CSS	11	07.01.2009 18:34
CSS von Button überschreiben	rene.guenther	CSS	2	19.02.2008 10:25
dropdown button mit css formatieren?	lisa soleil	CSS	5	28.11.2007 11:09
Hintergrundbild mit CSS und Link???	Gifmik	CSS	2	06.02.2006 13:27
CSS Button	BabbleBoy	CSS	2	20.01.2006 14:10