Wie geht das mit CSS?
Ich kann deswegen nicht einfach ein größeres Div mit Border rundherum machen, weil ich will, dass dieser Border aktiv wird wenn man z.B. drüber hovert oder auf einen Knopf klickt. Es gibt viele Knöpfe. Und der Knopf auf den man sich gerade konzentriert, der soll halt einen Border bekommen -> aber mit viel Abstand. Margin und Padding habe ich beides ausprobiert, bewirkt nicht was ich wollte.
1 Antwort
Outline wurde ja schon genannt und dann ist es ja nicht so schwierig. Hier ein einfaches Beispiel:
HTML
<section>
<div>
<h2>Bestellung</h2>
<button class="order-button">Hier bestellen</button>
</div>
</section>
CSS
.order-button:hover {
outline: 3px dotted black;
outline-offset: 20px;
}
Link:
Um den border-radius wegzubekommen muss man tricksen (zumindest kenne ich keinen besseren Weg). Du kannst es bspw. mit dem Pseudoelement ::before machen.
CSS
.order-button {
position: relative;
margin: 0;
border-radius: 12px;
}
.order-button:hover::before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
outline: 3px dotted black;
outline-offset: 20px;
border-radius: none;
}
Beispiel
Interessant. Und wie geht das bei onClick? Also nicht mit :hover sondern bei Klick? Weil momentan hast du ja :hover::before rein CSS, aber Click ist JS.
Da gibt es verschiedene Wege. Ein Weg ist halt für den Button mittels Javascript eine extra Klasse für den Status (z.B. button-active) zu setzen und das dann im CSS mit abzubilden.
Javascript
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".order-button").forEach((button) => {
button.addEventListener("click", (e) => {
e.target.classList.toggle("button-active");
})
});
});
CSS
.order-button.button-active::before,
.order-button:hover::before {
…
}
Beispiel
Ah ja das macht Sinn. Also einfach der Klasse das ::before Pseudoelement anhängen. Trotzdem ganz schön kompliziert eig. für sowas einfaches ^^ Danke dir
Jup hatte deine Antwort leider erst danach gelesen, nachdem ich die Frage gestellt habe. Das ist genau was ich gesucht habe, danke.
Ach nochwas: Mein Div hat einen Border-radius für abgerundete Ecken. Jetzt hat die Outline natürlich auch abgerundete Ecken. Kann ich die Outline wieder gerade machen? Also dass sie nur ein Rechteck ist?