Button Icon unscharf + nicht responsive

Adioz · #1 (**permalink**) 13.05.2015, 23:44

Hallo liebes Forum,

ich stehe nun von einem Problem, welches ich nicht selber in den griff bekomme.

Ich habe auf meiner Seite einheitliche Button (Amazon Buttons), jedoch ist mein Amazon Icon immer unscharf. Egal was ich mache und tue, es bleibt unscharf!

Die Buttons findet ihr z.B. auf Shisha Kohleanzünder | Shisha-Test.de

CSS-Code

Code:

#button {
         font-family: Arial;
         display: block;
         box-sizing: border-box;
         text-decoration: none;
         white-space: nowrap;
         color: rgb(255, 255, 255);
         background-color: rgb(255, 153, 0);
         background-image: url("/a.ico");
         background-repeat: no-repeat;
         background-size: contain;
         background-position: 98%;
         border-radius: 4px;
         padding: 10px 43px 10px 10px;
	margin: 0 auto;
	width: 37%;
      }

HTML-Code:

<a id="button">jetzt ansehen auf</a>

Zudem ist mir aufgefallen, dass die Buttons auf dem Smartphone zusammen verrutschen? Wie kann ich es umschreiben, sodass der Button Text "jetzt ansehen" nicht mit dem icon verrutscht?

Besten Dank,

Ray

MrMurphy · #2 (**permalink**) 14.05.2015, 08:36

Hallo

Zitat:

Ich habe auf meiner Seite einheitliche Button (Amazon Buttons), jedoch ist mein Amazon Icon immer unscharf. Egal was ich mache und tue, es bleibt unscharf!

Das ist normal wenn Bilder vergrößert dargestellt werden. Das Original ist nur 16px mal 16px groß. Nimm also ein größeres Icon, das dann in der Originalgröße oder etwas verkleinert dargestellt wird.

Zitat:

Zudem ist mir aufgefallen, dass die Buttons auf dem Smartphone zusammen verrutschen?

Ich hatte dir doch bereits eine stabile Lösung erstellt. Warum nimmst du die nicht bzw. nimmst nur geringfügige Änderungen vor? In meiner Lösung kamen weder "display: block" noch eine width-Angabe vor.

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Amazon-Button</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         padding: 0;
      }
      p {
      }
      /*.button {*/
      a.button {
         display: inline-block;
         box-sizing: border-box;
         text-decoration: none;
         white-space: nowrap;
         color: rgb(255, 255, 255);
         background-color: rgb(255, 153, 0);
         background-image: url("http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-Amazon-alt-Metro-icon.png");
         background-repeat: no-repeat;
         background-size: contain;
         background-position: 98%;
         border-radius: 8px;
         padding: 12px 70px 12px 12px;
      }
   </style>
</head>
<body>
      <a class="button" href="#" rel="nofollow" target="_blank">jetzt ansehen auf</a>
</body>
</html>

Gruss

MrMurphy

Adioz · #3 (**permalink**) 14.05.2015, 08:42

Danke für den Tipp mit dem Icon! Werde ich heute gleich tauschen

Ich dachte nicht, dass display:block; der Grund dafür ist, aber jetzt weiß ichs besser!

Danke für deine Hilfe!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Responsive Button	houseshow	CSS	1	10.11.2014 19:33
Kundeninteresse an Responsive Layout	heiko_rs	Offtopic	18	24.05.2013 13:37
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
FF Problem: button mit image	darolla	CSS	6	02.04.2007 08:49
Button - Rahmen	dieter99	CSS	1	06.12.2006 10:13