Question 42897 in Html Question posted in
Some basic documentation can be found here.

Button moves page down slightly on hover – Html

I’ve added a hover effect to a button – it pushes the page down slightly when I hover over the button. Can’t figure out why it’s doing that, any help would be appreciated, thanks!

.button_aboutme {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #0071e3;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 200px;
  padding: 20px;
  margin-bottom: 130px;
}

.button_aboutme a {
  color: #FFF;
}

.button_aboutme:hover {
  border: solid #0071e3;
  background-color: #fff;
  transition: 0.1s;
}

.button_aboutme:hover a {
  color: #0071e3;
}
<div class="button_aboutme">
  <a href="about.html" title="Contact Page">About me</a>
</div>
Tags:

2

Answers


  1. 0

    The button is "moving" and "changing" it size, because it has "border" only on "hover" mode.
    You can add border: solid transparent; to .button_aboutme so button will have the same border both on .button_aboutme and .button_aboutme with hover.

    Note:

    you can set it to some other color (Let’s say "#00ff00) to see the border without the hover state, it is easier to understand it like that.

          .button_aboutme {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 18px;
        background-color: #0071e3;
        text-align: center;
        display: block;
        margin: auto;
        border-radius: 5px;
        width: 200px;
        padding: 20px;
        margin-bottom: 130px;
        /* border: solid 3px #00ff00; */
        border: solid transparent;
      }

      .button_aboutme a {
        color: #fff;
      }

      .button_aboutme:hover {
        border: solid #0071e3;
        background-color: #fff;
        transition: 0.1s;
      }

      .button_aboutme:hover a {
        color: #0071e3;
      }
        <div class="button_aboutme">
      <a href="about.html" title="Contact Page">About me</a>
    </div>
    Login or Signup to reply.
  2. 0

    Instead of adding a transparent border, you can also use the outline property. The good thing about that is when it’s applied it does not interfere with the rest of the document flow so applying it won’t reposition any other elements. It’s really handy when you want to add a ‘border’ around a div or other element to find out what’s going on during debugging without affecting any other part of the document.

    References: Outline on MDN and CSS tricks

    .button_aboutme {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #0071e3;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 200px;
  padding: 20px;
  margin-bottom: 130px;
}

.button_aboutme a {
  color: #FFF;
}

.button_aboutme:hover {
  /*border: solid #0071e3; removed this */
  outline: solid #0071e3; /* added this */
  background-color: #fff;
  transition: 0.1s;
}

.button_aboutme:hover a {
  color: #0071e3;
}
    <div class="button_aboutme">
  <a href="about.html" title="Contact Page">About me</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search