wie kann ich die größe und farbe eines Buttons anpassen html und css?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
PC, Computer, Technik
30.08.2020, 09:01

Das Styling des Instagram Buttons kannst du leicht selbst über das Webinspektor-Tool deines Browsers auslesen (Rechtsklick auf den Button > Element untersuchen / o.ä.). Es listet alle Stylesheets auf, die auf das Element aktiv wirken.

Ich habe einmal einen Follow-Button nachgebaut. Nach einem Verify-Button hätte ich nun vermutlich länger suchen müssen, aber ich denke eh, dass der kaum anders aussehen wird.

HTML:

<button class="instagram-like-button" type="button">Follow</button>

Beachte, dass ein Button kein Kindelement eines a-Elements sein darf! Dein obiges Snippet entspricht also keinem validen HTML und führt für bestimmte Nutzergruppen eher zu Problemen.

Wenn du den Button mit einem Link ausstatten möchtest, kannst du entweder ein Formular zusammenstellen (wobei der Button als Submit-Button eingesetzt wird):

<form action="yourTargetURL">
  <button class="instagram-like-button">Follow</button>
</form>

oder du verwendest einfach nur ein a-Element (das würde ich empfehlen):

<a class="instagram-like-button" href="yourTargetURL">Follow</a>

Da das Styling via Klassenselektor definiert wird, ist es ziemlich flexibel und es sind nur wenige Anpassungen notwendig. In diesem Fall sollte noch dieses CSS-Property ergänzt werden:

text-decoration: none;

Zum CSS generell:

.instagram-like-button {
  background-color: #0095f6;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  padding: 5px 9px;
}

Demo

Vielleicht sind noch ein paar weitere Styles notwendig oder es muss noch eine der aufgezählten Schriften eingebunden werden (es sind ja nicht alle in dieser Auflistung standardmäßig auf jedem Rechner vorhanden). Doch als Grundlage sollte es erst einmal vollkommen ausreichen.
RYUK318 
Fragesteller
 30.08.2020, 12:02

Danke

0
ItachiDontDie
30.08.2020, 02:45

Hier haste einen blauen button der gestylt ist (mir is grad bissl langweilig deswegen schreib ich jz ganze codes für Leute): 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button style | ItachiDontDie</title>
    <style>
        .button1 {
            background-color: #5d6adf;
            border: none;
            padding: .6em;
            border-radius: .4em;
            font-size: 1.3em;
            cursor: pointer;
        }
        .button1:hover {
            background-color: #505bbe;
        }
        a:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#"><button type="button" name="button" class="button1">verify</button></a>
    </div>
</body>
</html>

Hoffe ich konnte helfen. Kannst es ja noch anpassen
Woher ich das weiß:eigene Erfahrung
regex9  30.08.2020, 02:48

Ein button-Element hat innerhalb eines a-Tags nichts zu suchen (das gilt genauso andersherum).

0
ItachiDontDie  30.08.2020, 03:09
@regex9

ja das weiß ich, hat der fragesteller aber so gemacht, und funktionieren tut es

0
ItachiDontDie  30.08.2020, 03:10
@regex9

ach ja und noch was gnaz anderes, kennst du dich mit css bootstrap aus?

0
regex9  30.08.2020, 07:18
@ItachiDontDie

Hmn, dann verstehe ich nicht, wieso du den Fehler einfach übernimmst. Finde ich nicht gut. 😕

0
D4vidH
29.08.2020, 22:44

Du kannst einfach die Hintergrundfarbe des Buttons ändern:

<button type="button" name="button" style="background: #008;">verify</button>