• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Link in diesem Button hinzufügen

mpabrego

Neues Mitglied
Hallo zusammen

Ich würde gerne einen Link in diesem Button einbauen. Es gelingt mir leider nicht. Ich weiss nicht wo die richtige Position ist und was sonst anpassen musst.

Kann mir jemand helfen?

<!DOCTYPE html>
<html>
<head>
<style>
button {
color: #ffffff;
background-color: #004494;
font-size: 19px;
border: 1px solid #2d63c8;
padding: 15px 80px;
cursor: pointer
}
button:hover {
color: #2d63c8;
background-color: #ffffff;
}
</style>
</head>
<body>
<button type="submit" name="myButton">English</button>
</body>
</html>


Vielen Dank für die Unterstützung!

LG,
Paula
 
Werbung:
Schaue dir mal den a-Tag an (die Seite kann ich für HTML-Anfänger sehr empfehlen). Dieses Element solltest du benutzen, wenn du nicht zwingend button benutzen musst.

Falls du jedoch wirklich deinen button behalten möchtest, musst du ein wenig tricksen:
HTML:
<form action="http://example.com/">
  <button>Visit Website</button>
</form>
Mehr Infos dazu gibt es hier.

Grund für diesen Trick ist, dass ein button in einem a-Element kein gültiges HTML5 ist.
 
Werbung:
Schaue dir mal den a-Tag an (die Seite kann ich für HTML-Anfänger sehr empfehlen). Dieses Element solltest du benutzen, wenn du nicht zwingend button benutzen musst.

Falls du jedoch wirklich deinen button behalten möchtest, musst du ein wenig tricksen:
HTML:
<form action="http://example.com/">
  <button>Visit Website</button>
</form>
Mehr Infos dazu gibt es hier.

Grund für diesen Trick ist, dass ein button in einem a-Element kein gültiges HTML5 ist.
Hallo Aaron

Vielen Dank für den Input. Wir haben Kentico al CMS und im Prinzip kann ich schon Buttons erstellen, aber ich will die Breite definieren, da diese passen sich mit dem Text an, deshalb will ich, dass zum Beispiel alle Buttions 80px breit sind.
Html Code vom Button:
<td><a class="btn" href="/MullerMartini/media/content/Company/MM_Code-of-Conduct_PT.pdf" target="_blank">Portugiesisch</a><br>
&nbsp;</td>

1662547335299.png


Deshalb habe ich online mit einem Button generaton einen HTMLCode erstellt, aber leider gibt es nicht die funktion mit Link.

Wenn ich den oben von mir gennanten Code eingebe sieht es so aus:
1662547695630.png
Aber ich kann keinen Link verlinken.

Vielleicht weiss du hier was ich anpassen kann, damit die Breite des Buttons definieren kann:

<td><a class="btn" href="/MullerMartini/media/content/Company/MM_Code-of-Conduct_PT.pdf" target="_blank">Portugiesisch</a><br>
&nbsp;</td>

Vielen Dank für Unterstützung!
 
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
 button { width: 120px; height: 30px; background-color: blue; color: white; border: 0;  font-size: 16px; }
</style>
</head>
<body>
<button onclick="document.location='https://www.google.de'">Deutsch</button>
<button onclick="document.location='https://www.facebook.com'">Englisch</button>
<button onclick="document.location='https://www.html.de'">Portugiesisch</button>
</body>
</html>
Und dein Tabellenlayout scheint mir an dieser Stelle falsch zu sein, Flexbox oder Grid solltest du dir mal ansehen
 
Damit kenne ich mich leider nicht aus und ich vermute, dass auch andere Forenmitglieder keine Erfahrung damit haben. Ich kann dir sagen, wie der Quellcode aussehen muss, aber keine Expertise zu Funktionen deines CMS's geben.

Vielleicht weiss du hier was ich anpassen kann, damit die Breite des Buttons definieren kann:

<td><a class="btn" href="/MullerMartini/media/content/Company/MM_Code-of-Conduct_PT.pdf" target="_blank">Portugiesisch</a><br>
&nbsp;</td>
Hier solltest du auf CSS zurückgreifen und width benutzen. Beachte auch den Kommentar von m.scatello.
Generell muss ich leider sagen, dass die meisten CMSs leider nicht zu gebrauchen sind.
 
Werbung:
Vielleicht weiss du hier was ich anpassen kann, damit die Breite des Buttons definieren kann:
Du hast Links, damit ist a das richtige Element, button ist hier falsch. Um eine Breite (in (r)em, nicht in px!) angeben zu können, könntest du die display-Eigenschaft auf (inline-)block setzen. Sinnvoller wäre es aber die Links per grid-Layout auf mehrere Zeilen zu verteilen - das hat dann gleich den Vorteil dass sich das Layout an unterschiedliche Fensterbreiten anpasst. Eine einfache Liste und schon passt sich alles automatisch an:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Demo</title>
  <style>
    ul {
      list-style-type: none;
      display: grid;
      grid-template-columns: repeat(auto-fill, 10em);
    }
    li {
      text-align: center;
      margin: 0.5em;
      padding: 0.5em;
      border: 1px solid;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="de">deutsch</a></li>
    <li><a href="en">englisch</a></li>
    <li><a href="fr">französisch</a></li>
    <li><a href="it">italienisch</a></li>
    <li><a href="es">spanisch</a></li>
    <li><a href="pt">portugiesisch</a></li>
  </ul>
</body>
</html>
(die restlichen Eigenschaften für die gewünschte Darstellung der Links darfst du selbst einbauen)

<button onclick="document.location='https://www.google.de'">Deutsch</button>
Eine schlechtere "Lösung" ist dir nicht eingefallen?
 
Zurück
Oben