CSS Links Buttonähnlich formatieren

18/12/2013 - 17:18 von Markus Steinborn | Report spam
Hallo,

ich versuche mich darin, links so zu formatieren, dass diese wie Buttons
aussehen.

Was habe ich gemacht? Ich habe das von
http://www.cssbuttongenerator.com/ erzeugte CSS, welches genau jenes
machen soll, in folgende Testdatei eingebaut:

<html>
<head>
<title>Foo</title>
<style>
.button{
text-decoration:none;
text-align:center;
padding:11px 32px;
border:solid 1px #004F72;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#E5FFFF;
background-color:#3BA4C7;
background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
</style>
</head>
<body>
<p><a href="#" class="button"/>Foo</a></p>
<p><a href="#" class="button"/>Bar</a></p>
</body>
</html>



Leider werden die beiden Testlnks "Foo" und "Bar" sich überlappend
dargestellt. Die Ursache habe ich in der Paddimg-Deklaraion ausgemacht,
wenn die fehlt, passen die Abstànde zwischen den Links; dafür sind die
Buttonàhlichen Links eben zu klein. Wie kann man das korrigieren?


Danke

Markus
 

Lesen sie die antworten

#1 Markus Steinborn
18/12/2013 - 17:20 | Warnen spam
Markus Steinborn schrieb:
Hallo,

ich versuche mich darin, links so zu formatieren, dass diese wie Buttons
aussehen.

Was habe ich gemacht? Ich habe das von
http://www.cssbuttongenerator.com/ erzeugte CSS, welches genau jenes
machen soll, in folgende Testdatei eingebaut:



Korrektur, es war http://www.cssbuttongenerator.de/ , was aber nichts
wesentliches am Problem àndert.


Grüße

Markus

Ähnliche fragen