/* ### */
/* Blau */
/* ### */

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

.glow-on-hover-blue:before {
    content: '';
    background: linear-gradient(65deg, #002bff, #0055ff, #007aff, #00c8ff, #002bff);
    position: absolute;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    animation: glowing 30s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 15px;
}

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

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

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

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ### */
/* Grün */
/* ### */

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

.glow-on-hover-green:before {
    content: '';
    background: linear-gradient(65deg, #00ff00, #33cc33, #66ff66, #00cc00, #009933, #00ff99, #33ff33, #66cc66, #00ff00);
    position: absolute;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    animation: glowing 30s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 15px;
}

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

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

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

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ### */
/* Violett */
/* ### */

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

.glow-on-hover-purple:before {
    content: '';
    background: linear-gradient(65deg, #8a2be2, #9400d3, #9932cc, #a020f0, #8b008b, #800080, #9370db, #ba55d3, #8a2be2);
    position: absolute;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    animation: glowing 30s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 15px;
}

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

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

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

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ### */
/* Pink */
/* ### */

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

.glow-on-hover-pink:before {
    content: '';
    background: linear-gradient(65deg, #ff69b4, #ff5eab, #ff53a2, #ff4899, #ff3d90, #ff3287, #ff277e, #ff1c75, #ff69b4);
    position: absolute;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    animation: glowing 30s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 15px;
}

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

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

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

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ### */
/* Rot */
/* ### */

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

.glow-on-hover-red:before {
    content: '';
    background: linear-gradient(65deg, #ffd700, #e6c200, #ccab00, #b39500, #997e00, #ffd700);
    position: absolute;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    animation: glowing 30s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 15px;
}

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

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

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

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}