In diesem Artikel habe ich dir 2 einfache Div-Container mit Glow-Effekt zusammengestellt.
Hierbei handelt es sich rein um HTML und CSS Container.
Achte darauf, dass sich die Div-Weite an dein Div-Gerüst anpasst (display:inline-block;). Wenn du die Div-Weite manuell festlegen möchtest, musst du „display:inline-block;“ gegen „width: [pixel]px;“ ersetzen.
Glow-Box 1:
HTML:
<div class="div-1">
<b><u>Überschrift</u></b>
<p>
Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.
</p>
<p>
<a href="#div-1">
<div class="div-1-button">
Zum Code
</div>
</a>
</p>
</div>CSS:
.div-1 {
display:inline-block;
padding: 10px;
-webkit-box-shadow:0px 0px 75px 0px rgba(45,255,196,0.9);
-moz-box-shadow: 0px 0px 75px 0px rgba(45,255,196,0.9);
box-shadow: 0px 0px 75px 0px rgba(45,255,196,0.9);
}
.div-1-button {
display:inline-block;
padding: 5px;
transition: background-color .3s ease-in-out;
transition: box-shadow .3s ease-in-out;
}
.div-1-button:hover {
background-color: rgba(45,255,196,0.9);
-webkit-box-shadow:0px 0px 20px 0px rgba(45,255,196,0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(45,255,196,0.9);
box-shadow: 0px 0px 20px 0px rgba(45,255,196,0.9);
}Glow-Box 2:
HTML:
<div class="div-2">
<img class="img-2" src="https://ju-development.de/wp-content/uploads/2025/01/Berg-7.png">
<p>
<b><u>Überschrift</u></b></p>
<p>
Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.
</p>
<p>
<a href="#div-2">
<div class="div-2-button">
Zum Code
</div>
</a>
</p>
</div>CSS:
.div-2 {
display:inline-block;
padding: 10px;
-webkit-box-shadow:0px 0px 75px 0px rgba(45,100,196,0.9);
-moz-box-shadow: 0px 0px 75px 0px rgba(45,100,196,0.9);
box-shadow: 0px 0px 75px 0px rgba(45,100,196,0.9);
}
.div-2-button {
display:inline-block;
padding: 5px;
transition: background-color .3s ease-in-out;
transition: box-shadow .3s ease-in-out
}
.div-2-button:hover {
background-color: rgba(45,100,196,0.9);
-webkit-box-shadow:0px 0px 20px 0px rgba(45,100,196,0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(45,100,196,0.9);
box-shadow: 0px 0px 20px 0px rgba(45,100,196,0.9);
}
.img-2 {
width: 100%;
height: auto;
}