Question 185527 in CSS Question posted in
Some basic documentation can be found here.

why does my button keep moving from its intended position on hover state in CSS?

Each time I hover above my button or sometimes, link, it displaces slightly horizontally or vertically when all I expect is a color change.Sometimes,it reduces in size even when I did not scale it. I try to do the styling as accurately as possible but still,it keeps displacing. Please I’d like to know why.

I tried to change my method. This is actually a recurring problem. I just want to understand how to solve it so I can avoid it in future projects.

Tags:

2

Answers


  1. 0

    This will work fine for you, let me know if any problem occurs.

    <style>
    body{}
    .btn{
        text-decoration: none;
        border: none;
        background: yellow
    }
    .btn:hover{
        background: green;
    }
</style>
      <button class="btn">hover</button>

    And if you are still facing problems then you can elaborate more by
    posting your code.

    Login or Signup to reply.
  2. 0

    I am also very new, but I tried importing this exact code into code pen, and vs code and got perfect results. Are you sure it doesn’t have something to do with your browser?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search