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

How to properly hover and highlight buttons in CSS

I just started learning CSS and I made two buttons for practicing padding and margin mechanics. Now, I want to make the buttons a little large so that it pop ups. But, I dont want one button to push the other one to so that it can grow. I got it right for the save button but I cannot get it right for the other one.

<style>
  .apply-button {
    margin-left:20px;
    margin-right:20px;
    background-color:rgb(10, 102, 194);
    color:white;
    border:none;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius:120px;
    font-weight:bold;
    font-size:17px;
    margin-top:none;
    cursor:pointer;
    transition:background-color 0.15s,
      color 0.15s,
      margin-left 0.15s,
      margin-right 0.15s,
      padding-left 0.15s,
      padding-right 0.15s,
      font-size 0.15s;
  }
  .apply-button:hover {
    margin-left:13px;
    margin-right:13px;
    padding-left:22px;
    padding-right:22px;
    padding-top:11px;
    padding-bottom:11px;
    font-size:18px;
    background-color:rgb(0, 59, 122);
    color:rgba(255, 255, 255, 0.801);
    box-shadow:0px 4px 10px rgba(0, 0, 0, 0.26);
  }
  .save-button {
    margin-left:18px;
    margin-top:50px;
    background-color:rgb(255, 255, 255);
    color:rgb(10, 102,194);
    border-color:rgb(10, 102,194);
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius:40px;
    border-width:2px;
    border-style:solid;
    font-weight:bold;
    font-size:17px;
    cursor:pointer;
    transition:box-shadow 0.15s,
      margin-left 0.15s,
      padding-right 0.15s,
      padding-left 0.15s;

  }
  .save-button:hover {
    margin-left:10px;
    background-color:rgba(87, 171, 255, 0.26);
    padding-left:24px;
    padding-right:24px;
    border-width:3px
    box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
    
  }
  .save-button:active {
    background-color:rgb(10, 102,194);
    color:white;
    
  }
</style>


<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>

I tried to make the margins smaller with respect to the padding increasing as I hover. Theoritically it should work but the larger one is still pushing the other one as it enlarges. Again, i’m just starting out and there are probably other ways to do it. Thank you.reference video

Tags:

2

Answers


  1. 0

    For the apply button, you’re increasing the margin on hover instead of reducing it – for this to work, the overall size of the button (text size + padding + margin) has to stay the same. This works:

    #left {
  margin: 5px;
  padding: 5px;
}
#left:hover {
  margin: 0px;
  padding: 10px;
}
#right {
  margin: 5px;
  padding: 5px;
}
#right:hover {
  margin: 0px;
  padding: 10px;
}
    <button id="left">Left</button>
<button id="right">Right</button>
    Login or Signup to reply.
  2. 0

    Using transform: scale; make it better.

    .apply-button {
  margin-left:20px;
  margin-right:20px;
  background-color:rgb(10, 102, 194);
  color:white;
  border:none;
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:120px;
  font-weight:bold;
  font-size:17px;
  margin-top:none;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);
}
.apply-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgb(0, 59, 122);
  color:rgba(255, 255, 255, 0.801);
  box-shadow:0px 4px 10px rgba(0, 0, 0, 0.26);
}
.save-button {
  margin-left:18px;
  margin-top:50px;
  background-color:rgb(255, 255, 255);
  color:rgb(10, 102,194);
  border-color:rgb(10, 102,194);
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:40px;
  border-width:2px;
  border-style:solid;
  font-weight:bold;
  font-size:17px;
  cursor:pointer;
  transition: all 0.5s ease;
  transform: scale(1);

}
.save-button:hover {
  transform: scale(1.2) perspective(1px);
  background-color:rgba(87, 171, 255, 0.26);
  box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
  
}
.save-button:active {
  background-color:rgb(10, 102,194);
  color:white;
  
}
    <button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search