CSS Hover transition not working on my website

Question

and I'm wanting my code when hovering over the buttons to do both transitions at the same time, but it will only do the colour of the text and not the box around it. it will do the text at 1.5 seconds but the box straight away

this is my html code

<!DOCTYPE html>
<html>

    <head>
    <link href="https://fonts.googleapis.com/css?family=Gaegu&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="Styles.css">
        <title>About Me</title>
    </head>

    <body>
    <h1>Joels Website Building</h1>
            <a href='About Me.html'>About Me</a>
            <a href='my website.html'>Home</a>
        <div id="div1">

            <h2>About Me</h2>

        </div>
        <p></p>

    </body>

</html>

and this is my CSS code

    h1 { border-radius: 25px;
  border: 10px solid transparent;
  border-image: url(border.png) 30% round;
    font-family: 'Gaegu', cursive;
    font-weight: 1000;
    text-align:center;
    color:#61D600;
    font-size:50px;
    transform:rotateX(40deg);
      text-shadow: 8px 8px 16px darkblue, 0 0 100px purple, 0 0 20px #4B0082;
      border-radius:50px;
radius:50px;
outline-style: solid;
}

h2 {
    color:#000080;
    text-shadow: 1px 1px 2px #6ed3cf, 0 0 25px #6ed3cf, 0 0 5px #6ed3cf;
}

html{
    background:linear-gradient(to right, #9068be, #6ed3cf, #9068be); 
}

body{
    height: 100vh;
}

*{
    cursor: url(Infinity Gauntlet Snap.cur), default;
}

a{
    font-size:25px;
    color:maroon;
    background:teal;
    transition:background 1500ms ease-in;
    transition:color 1500ms ease-in;
}

a:hover{
    color:yellow;
    background:purple;
    font-size:25px;
}

and I'm wanting my code when hovering over the buttons to do both transitions at the same time, but it will only do the colour of the text and not the box around it. it will do the text at 1.5 seconds but the box straight away

CSS Hover transition not working on my website

0 Answers0