Efekt można uzyskać bez js-a Codepen
<p class="guzik czerwony"></p><br>
<p class="first">To jest przykład paragrafu, który może być dowolonie formatowany przez Css</p><br>
<input type="checkbox" id="guzik">
<label class="guzik czerwony" for="guzik"></label><br>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez Css</p><br>
.guzik {
float: left;
margin: 4px;
width: 15px;
height: 15px;
cursor: pointer;
}
.guzik:active ~ p.first {
background-color: red;
animation: bg-to-red 1s;
}
.guzik:hover {
animation: line-holo 1.2s infinite;
}
.guzik:hover::after {
content: 'kliknij';
font: 0.65em/0.68em monospace;
padding-left: 2em;
}
#guzik {
display: none;
}
#guzik:checked ~ p {
background-color: red;
animation: bg-to-red 1s;
}
#guzik:not(:checked) ~ p {
background-color: transparent;
transition: background 1s ease-out;
}
.czerwony {
background-color: red;
}
@keyframes line-holo {
0% {
box-shadow: 0px 0px 0px rgba(255,0,0,1);
}
50% {
box-shadow: 0px 0px 20px rgba(255,255,255,1),
0px 0px 25px rgba(255,0,0,1);
transform: scale(1.2);
}
100% {
box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
}
@keyframes bg-to-red {
from{
background-color: transparent;
}
to {
background-color: red;
}
}
... lub
@ScriptyChris,
... to lepiej w CSS stworzyć klasy nadające różne style i JS'em odpowiednio je przełączać na elemencie przy użyciu classList.
<p class="guzik czerwony"></p>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript i Css</p>
.guzik {
margin: 4px;
width: 15px;
height: 15px;
cursor: pointer;
}
.guzik:hover {
animation: line-holo 1.2s infinite;
}
p {
transition: background 1s ease-out;
}
.czerwony {
background-color: red;
transition: background 1s ease-out;
}
@keyframes line-holo {
0% {
box-shadow: 0px 0px 0px rgba(255,0,0,1);
}
50% {
box-shadow: 0px 0px 20px rgba(255,255,255,1),
0px 0px 25px rgba(255,0,0,1);
transform: scale(1.2);
}
100% {
box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
}
const guzik = document.querySelector('p.guzik');
const p = document.querySelector('p:not(.guzik)');
guzik.addEventListener('click', () => {
p.classList.toggle('czerwony');
});
Codepen
<p class="guzik czerwony"></p>
<p class="guzik zielony"></p>
<p class="guzik pomaranczowy"></p>
<p class="guzik niebieski"></p>
<p class="guzik czarny"></p>
<p class="guzik zolty"></p>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript i Css</p>
.guzik {
display: inline-block;
margin: 0.5em;
width: 15px;
height: 15px;
cursor: pointer;
}
.guzik:hover {
animation: line-holo 1.2s infinite;
}
p {
font: 1em/1.2em monospace;
transition: all 1s ease-out;
}
.czerwony {
background-color: red;
color: white;
}
.zielony {
background-color: green;
color: white;
}
.pomaranczowy {
background-color: orange;
}
.niebieski {
background-color: blue;
color: white;
}
.czarny {
background-color: black;
color: white;
}
.zolty {
background-color: yellow;
color: black;
border: 1px solid black;
}
@keyframes line-holo {
0% {
box-shadow: box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
50% {
box-shadow: 0px 0px 10px rgba(255,255,255,1),
0px 0px 15px var(--holo-color),
0px 0px 20px var(--holo-color);
transform: scale(1.2);
}
100% {
box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
}
const holo_color_variables = document.documentElement;
const guziki = document.querySelectorAll('p.guzik');
const p = document.querySelector('p:not(.guzik)');
guziki.forEach((guzik) => {
guzik.addEventListener('click', (e) => {
const css = e.target.classList; // <p class="guzik kolor_klasy">
if (!p.classList.contains(css[1])) p.className = '';
p.classList.toggle(css[1]); // <p class="guzik czerwony"> [0] guzik, [1] czerwony
});
guzik.addEventListener('mouseover', (e) => {
const value = window.getComputedStyle(e.target, null).getPropertyValue('background-color');
holo_color_variables.style.setProperty('--holo-color', value);
});
})