Hi
I was tormented, but I still didn't understand-how to change the text of this button using an event in construct 3
the text is located here
"<button class="glow-on-hover">Click Me</button>"
disk.yandex.ru/showcaptcha
Html element text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Button</title>
<style>
/* Resetting default margins and paddings for full-screen layout */
html, body {
}
/* Styling for the glowing button */
.glow-on-hover {
width: 120px;
height: 40px;
border: none;
outline: none;
color: #fff;
background: #111; /* Dark background color for the button */
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* Before pseudo-element for the glowing effect */
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px); /* Makes the glow soft and diffused */
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite; /* Animation to move the gradient */
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease-in-out; /* Smooth transition when hovering */
border-radius: 10px;
}
/* Active state for the button */
.glow-on-hover:active {
color: #000; /* Change text color when clicked */
}
.glow-on-hover:active:after {
background: transparent; /* Remove the background when clicked */
}
/* Hover state to trigger the glowing effect */
.glow-on-hover:hover:before {
opacity: 1; /* Show the glow effect */
}
/* After pseudo-element to add a background layer */
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111; /* Same as the button's background */
left: 0;
top: 0;
border-radius: 10px;
}
/* Keyframes for the glowing effect */
KeyFrames glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</head>
<body>
<button class="glow-on-hover">Click Me</button>
</body>
</html>