CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

2 Antworten

Von Experte Babelfish bestätigt
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, IT
16.04.2022, 05:47

Validiere erst einmal dein HTML-Markup und behebe die angezeigten Fehler. Weder das <button> Element darf ein <a> Element enthalten, noch umgekehrt. Entweder es handelt sich um einen Button, oder es ist ein Link, der auf etwas verweist. Die text-decoration: underline stammt von deinem Anker-Tag, mit deiner Klasse referenzierst du jedoch das umschließende <button> Element. Folglich wird der Anker in deinem CSS nicht angesprochen und wie gewünscht formatiert.

Da eine Verschachtelung dieser Elemente ohnehin nicht erlaubt ist, solltest du dir darüber Gedanken machen, welches Element an dieser Stelle das richtige ist. Benötigst du einen Button (z.B. für eine Funktion) oder bloß einen Link als Verweis? Mein gut gemeinter Tipp an dich: Lese dir essenzielles HTML-Grundlagenwissen an und verwende zusätzlich den Validator des W3C. Mit dessen Hilfe kannst du ohne fremdes Zutun schnell (semantische) Fehler erkennen und beheben.

HTML:

<button class="cn">create</button>

CSS:

.cn {
  width: 160px; 
  height: 40px;
  margin: 5px 0 10px 20px;
  border: none;
  border-radius: 10px;
  background: #23002f;
  font-size: 18px;
  cursor: pointer;
  trasition: .4s ease;
}

Nachtrag:

Unswar möchte ich einen button haben mit einen link und wenn ich nur link nehme habe ich kein button

Technisch gesehen handelt es sich also um einen Link, der lediglich visuell als Button angezeigt wird. In dem Fall wäre das <a> Element die richtige Wahl. Das Aussehen des Ankers setzt du dann mithilfe von CSS um.

HTML:

<a href="#" class="btn-cn">create</a>

CSS:

.btn-cn {
  width: 160px;
  height: 40px;
  padding-left: 1rem; 
  display: inline-block;
  line-height: 2.5;
  text-decoration: none;
  color: #fff;
  background-color: #23002f;
  border-radius: 5px;
}

Bild zum Beitrag

LG medmonk
Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer
- (Computer, Technik, Internet)
16.04.2022, 04:18

Die Linie ist nicht vom Button, sondern vom Link (<a>). Du musst die CSS-Eigenschaften schon dem richtigen Element zuweisen.
Woher ich das weiß:Studium / Ausbildung – Informatikstudium

Weiß grad nicht was du meinst... Wie ist das den richtig? Ich mein alle css eigenschaften klappen außer text decoration
0
@Patrick649

Du hast zwei Elemente: Ein <button> und darin ein <a>. Die CSS-Eigenschaften sind alle für den <button>, aber die Linie stammt nicht vom <button>, sondern vom <a>. Was ist daran schwer zu verstehen?

Ach ja, ich bin mir ziemlich sicher, dass es eine schlechte Idee ist, einen Link in einen Button zu stecken. Verwende entweder einen Button oder einen Link, nicht beides.
2
@VeryBestAnswers

Hallo das klappt nicht... Unswar möchte ich einen button haben mit einen link und wenn ich nur link nehme habe ich kein button und andersrum deswegen wollte ich ja beides machen
0
@Patrick649

Diese Kombination ist aber falsch. Innerhalb eines button-Elements sind Links nicht erlaubt und dasselbe gilt andersherum. Einen Button, der auf eine andere Seite verweist, kann man sich schnell mit einem Formular zusammenbauen:

<form action="your target URL ..." title="Go to ...">
  <button>Go to ...</button>
</form>
1
@regex9

Das ist kein guter Stil. Für Präsentierung ist CSS da, nicht HTML. Wenn der Link wie ein Button aussehen soll, ist das mit CSS einfach:

.buttonLink {
  display: inline-block;
  border: 1px solid gray;
  padding: 0.5em 1em;
  border-radius: 0.2em;
  color: inherit;
  background-color: #ddd;
  text-decoration: none;
}

Oder so ähnlich.
1
@Patrick649

Du solltest in css folgendes hinzufügen

a 
{
  text-decoration: none;
  color: ...;
  background-color: ...;
}
0