CODEWITHSUNDEEP
htmlcsshover
Grigoras Vlad Albastrel6
Grigoras Vlad Albastrel6

Reputation: 37

Everytime I hover over a button my text and image moves

Soo every time I hover any of the 7 buttons,everything goes a bit to the right. Can someone please quickly show me a solution to this. I know it isn't such a good code, but I am just a begginer in HTML.

<html>
<head> 
    <title> Desenele Animate </title>
    <center> <font face="Lucida Bright" color="#000000" size="48"> Desenele Animate </font> </center>   
    <style>
        .button {
        background-color: #4CAF50;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
        border-radius: 8px;
        width: 250px;
        }

        .button1 {
            background-color: #4CAF50;
            color: white;
        }
        .button1:hover {
            background-color: white; 
        color: black; 
            border: 2px solid #4CAF50;
        }

        .button2 {
            background-color: #008CBA;
            color: white;
        }
        .button2:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #008CBA;
        }

        .button3 {
            background-color: #f44336;
            color: white;
        }
        .button3:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #f44336;
        }

        .button4 {
        background-color: #ffa500;
        color: white;
        }
        .button4:hover {    
        background-color: white;
            color: black;
            border: 2px solid #ffa500;
        }`

        .button5 {
        background-color: #bf80ff;
            color: white;
        }
        .button5:hover {
            background-color: white;
            color: black;
            border: 2px solid #bf80ff;
        }

        .button6 {
        background-color: #ff66ff;
            color: white;
        }
        .button6:hover {
            background-color: white;
            color: black;
            border: 2px solid #ff66ff;
        }
        .button7 {
        background-color: #00cccc;
            color: white;
        }
        .button7:hover {
            background-color: white;
            color: black;
            border: 2px solid #00cccc;
        }

    </style>        
</head>
<body bgcolor= "white"> 
    <br>
    <div id="nav">
    <table style="float:left;">
        <tr><td><a href="Archer.html" class="button button1">Archer</a><br></td></tr>
        <tr><td><a href="South park.html" class="button button2">South Park</a><br></td></tr>
        <tr><td><a href="Gravity Falls.html" class="button button3">Gravity Falls</a><br></td></tr>
        <tr><td><a href="Steven Universe.html" class="button button4">Steven Universe</a><br></td></tr>
        <tr><td><a href="Adventure Time.html" class="button button5">Adventure Time</a><br></td></tr>   
        <tr><td><a href="Rick and Morty.html" class="button button6">Rick And Morty</a><br></td></tr>
        <tr><td><a href="Futurama.html" class="button button7">Futurama</a><br></td></tr>
    </table>    
    </div>
    <center> <font face="Lucida Bright" color="#000000" size="5"> Desenele animate au inceput sa devina din ce in ce mai interesante, diferite si amuzante. Desigur, nu ne referim la desene precum "Looney Tunes". Ne referim la cele noi! Pline de sarcasm si de glume rautacioase! Am ales cateva PE care noi le consideram foarte inventive, amuzante si suntem siguri ca o sa va placa. Inainte de a le prezenta ne-am gandit sa vorbim putin despre ce sunt ele si evolutia lor, DAAAAR ne-am dat seama ca ar fi MULT prea plictisitor asa ca hai sa trecem direct la review-uri.</font></center>
    <br>
    <center> <img src="cornel.jpg"> </center>
</body>
</html>

Upvotes: 0

Views: 57

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206344

You should add a default transparent border

.button {
    border: 2px solid transparent;

cause on :hover you add that border border: 2px solid #00cccc; therefore the elements moves by those 2 px

a.btn:hover{
  border:2px solid red;
}

/* solution */
a.button{
  border:2px solid transparent;
}
a.button:hover{
  border:2px solid red;
}
<a class="btn">HOVER ME (I HAVE THT ISSUE...)</a><br>
<a class="button">HOVER ME (I feel just fine!)</a><br>

I just noticed you're using <center> and <font> tags. Don't those tags work in some browsers just for backward compatibility but are deprecated! Use CSS text-align: center; and font-size instead.

Upvotes: 1

Iatrarchy
Iatrarchy

Reputation: 348

Try box-sizing: border-box;

* {
    box-sizing: border-box;
}

Edit: you can also add an invisible border on normal button state

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

You need to declare a border-width for your default/natural state as well, in order to accommodate for the change during hover.

Example: border: 2px solid transparent;

.button {
        background-color: #4CAF50;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 8px;
            width: 250px;
            border: 2px solid transparent;
        }

        .button1 {
            background-color: #4CAF50;
            color: white;
        }
        .button1:hover {
            background-color: white; 
        color: black; 
            border: 2px solid #4CAF50;
        }

        .button2 {
            background-color: #008CBA;
            color: white;
        }
        .button2:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #008CBA;
        }

        .button3 {
            background-color: #f44336;
            color: white;
        }
        .button3:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #f44336;
        }

        .button4 {
        background-color: #ffa500;
        color: white;
        }
        .button4:hover {    
        background-color: white;
            color: black;
            border: 2px solid #ffa500;
        }`

        .button5 {
        background-color: #bf80ff;
            color: white;
        }
        .button5:hover {
            background-color: white;
            color: black;
            border: 2px solid #bf80ff;
        }

        .button6 {
        background-color: #ff66ff;
            color: white;
        }
        .button6:hover {
            background-color: white;
            color: black;
            border: 2px solid #ff66ff;
        }
        .button7 {
        background-color: #00cccc;
            color: white;
        }
        .button7:hover {
            background-color: white;
            color: black;
            border: 2px solid #00cccc;
        }
<div id="nav">
    <table style="float:left;">
        <tr><td><a href="Archer.html" class="button button1">Archer</a><br></td></tr>
        <tr><td><a href="South park.html" class="button button2">South Park</a><br></td></tr>
        <tr><td><a href="Gravity Falls.html" class="button button3">Gravity Falls</a><br></td></tr>
        <tr><td><a href="Steven Universe.html" class="button button4">Steven Universe</a><br></td></tr>
        <tr><td><a href="Adventure Time.html" class="button button5">Adventure Time</a><br></td></tr>   
        <tr><td><a href="Rick and Morty.html" class="button button6">Rick And Morty</a><br></td></tr>
        <tr><td><a href="Futurama.html" class="button button7">Futurama</a><br></td></tr>
    </table>    
    </div>
    <center> <font face="Lucida Bright" color="#000000" size="5"> Desenele animate au inceput sa devina din ce in ce mai interesante, diferite si amuzante. Desigur, nu ne referim la desene precum "Looney Tunes". Ne referim la cele noi! Pline de sarcasm si de glume rautacioase! Am ales cateva PE care noi le consideram foarte inventive, amuzante si suntem siguri ca o sa va placa. Inainte de a le prezenta ne-am gandit sa vorbim putin despre ce sunt ele si evolutia lor, DAAAAR ne-am dat seama ca ar fi MULT prea plictisitor asa ca hai sa trecem direct la review-uri.</font></center>
    <br>
    <center> <img src="cornel.jpg"> </center>

Upvotes: 0

Related Questions