Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I followed a tutorial on how to make animated, glowing buttons using only HTML and CSS. However, the buttons display fine apart from the text inside them doesn't display at all. Where am I going wrong? Thanks.

HTML
<pre><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Button Hover Effect</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <a href="#" style="--clr: #ff22bb; --i: 0">
            <span>Button</span>
            </a>
            <a href="#" style="--clr: #00ccff; --i: 1">
            <span>Buttonfdfdfd</span>
            </a>
        <a href="#" style="--clr: #22e622; --i: 2">
            <span>Button</span>
        </a>
    </div>
    </body>
</html>




CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    background: #0e1538;
}

a{
    position: relative;
    padding: 20px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0, 0, 0, 0.5);
    margin: 40px;
    transition: 1s;
    overflow: hidden;
    text-decoration: none;
}

a:hover {
    background: var(--clr);
    box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr), 0 0 60px var(--clr), 0 0 10px var(--clr);
}

a::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 400%;
    background: var(--clr);
    transition: 1s;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.33s * var(--i));
}

a:hover::before{
    width: 120%;

}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

a::after {
    content: '';
    position: absolute;
    background: #0e1538;
    inset: 4px;
    transition: 0.5s;

}
a:hover::after {
    background: var(--clr);
    z-index: 1;
    font-size: 2em;
    color: #fff;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: 0.5s;
}

a:hover span {
    opacity: 1;
    color: #0e1538;
}


What I have tried:

Tried using

instead of and heading tags but nothing is showing inside the buttons.

Posted
Updated 28-Dec-21 11:11am

1 solution

Isn't that generating black text on black buttons? Maybe you want white text...

:)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900