Help with code! [Custom Button / CSS]

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

Hello, I am trying to add a custom button to my game and I get it to work but the problem is that it rearranges a lot of stuff.
i.e:
My passages won’t show the top.
When I scroll to the bottom the background changes colors and blacks out text.
Some texts get centered for no reason.

I know the easy solution is to not use the button but I enjoy it and would like it to be in the game. I am a new coder, so I did copy this code from a website. So i understand if there is stuff in the code messing with my game. I just want to be able to take out what’s messing with my game while keeping the design of the button. Anyway, here is the code if someone could pretty please help me.

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.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);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
2

Honestly, that CSS had a lot of unnecessary parts. You can fix it by stripping it down to just this:

.glow-on-hover button {
    position: relative;
    padding-top: 6px;
    border-radius: 10px;
}
.glow-on-hover button:hover:before, .glow-on-hover button:focus: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);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

And then in your passages you could do something like this:

<span class="glow-on-hover"><<button "Glow on hover button">>
	/* Button code replaces this line. */
<</button>></span>

That will both let you use SugarCube buttons and also have the glow-on-hover effect for them.

If you want to change how the glow-on-hover buttons look even more, just put whatever additional CSS styling you need within the “.glow-on-hover button { ... }” section of your CSS code.

Enjoy! :slight_smile:

3

Thank you so much! You rock!

4

Note: I made a slight edit so that it also glows when it gets focus, which is helpful for people who can’t use a mouse and also makes it glow after being tapped on on a mobile device. So you might want to re-grab that code.