[ERLEDIGT] Button mit Link + Darstellung(sfehler?)

[annsen]

Hallo,

heute habe ich eine Frage zu einem Punkt, den ich bisher immer so hingenommen habe, obwohl es mich optisch etwas stört, weil ich der Meinung war, dass das das Standardverhalten ist. Vielleicht kann man das aber auch abstellen...

Ich habe auf einer Seite ein paar Button eingebaut (mit CSS gestaltet) um interne Links zu testen.

Einen runden Button habe ich erstellt, in dem ich ein <p>-Tag per CSS gestaltet habe - das enthält dann ein <a>-Tag, das verlinkt (nur so habe ich den Text zentriert bekommen - ich hab das über display:table/display: table-cell + vertical-align: middle umgesetzt).
Eckige Buttons habe ich gestaltet, in dem ich direkt das <a>-Tag gestaltet habe - hier kann ich den Text dann per text-align und padding zentrieren.

Allen Buttons/Links ist gemein, dass ich das verlinkte Element in einer gepunkteten Linie habe, wenn ich über die Browserfunktion auf die Ursprungsseite zurück gehe.
Oder anders beschrieben: der Button verlinkt intern von Seite "A" auf Seite "B" und wenn ich dann die browsereigene "zurück"-Funktion benutze, sehe ich eine gepunktete Linie um das verlinkte <p>/<a>-Element. Erst wenn ich dann einmal außerhalb des Elements auf die Seite klicke, verschwindet diese markierende Linie.

Kann ich dieses Verhalten irgendwie abstellen?

Was ist das genau? Ein ":visited"-Verhalten des Link-Elements?

 

[Tronjer]

Ich sehe im Chrome keine gepunkteten Linien bei Hyperlinks. Davon abgesehen ist ein Button ein <button>, kein <p> oder <a>.

 

[annsen]

HIer wird es beschrieben, auch wie man es abstellt:
https://css-tricks.com/removing-the-dotted-outline/

Jaja, versuch mal, mit CSS etwas vertical zu zentrieren. Bisher nur auf krummen Wegen zu machen, aber mit Flexlayout kein Problem:

            display: flex;
            align-items: center;
            justify-content: center;

Flex ist eingebaut (und funktioniert).
Für alle, die ebenfalls eine Lösung für das Ausblenden der gepunkteten Linie bereits besuchter Links suchen, hier die Zusammenfassung:

a {outline:0;}

Vielen Dank!!!