前端自定义按钮,设置边框移入抖动解决方案(带案例)

方案

解决方法：

第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个div的样式：div
{border:1px solid #aaa;}，然后再设置hover动作，div:hover { border:1px solid
red;} 。第二种方法：将这个div的border颜色设置为透明

案例

html

 <div class="main_right_btn_right1 main_right_btn_right2">Customize Shirts</div>

css

主要加下面这个样式,若移入有边框的话，移入前也要加边框，透明色，或者背景什么颜色，设置什么颜色，看下面实例

//下面这个是防止抖动样式
 border: 1px solid #fff;
 box-sizing: border-box !important;
overflow: hidden;

.main_right_btn_left1 {
  width: 157px;
  height: 52px;
  border-radius: 10px;
  background: #fdec57;
  text-align: center;
  line-height: 3;
  // 下面这个是防止选中文字
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
     // 这里也要加白色边框防止移入后有黑色边框距离差, 背景用什么颜色就用什么颜色边框,透明边框也可以 下面这两个样式至关重要！！！      border: 1px solid #fff; box-sizing: border-box !important;
      
  border: 1px solid #fff;
  // 下面这个是防止抖动样式
  box-sizing: border-box !important;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  span {
    font-family: MicrosoftYaHeiLight;
    font-size: 16px;
    font-weight: 290;
    line-height: 24px;
    letter-spacing: 1px;
  }
}
.main_right_btn_left1:hover {
  width: 157px;
  height: 52px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid #000000;
  background: none;
  text-align: center;
  line-height: 3;
  span {
    font-family: MicrosoftYaHeiLight;
    font-size: 16px;
    font-weight: 290;
    line-height: 24px;
    letter-spacing: 1px;
    /* Primary/Normal */
    color: #143a79;
  }
}
.main_right_btn_left2 {
  width: 156px;
  height: 52px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid #000000;
  background: none;
  text-align: center;
  line-height: 3;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  span {
    font-family: MicrosoftYaHeiLight;
    font-size: 16px;
    font-weight: 290;
    line-height: 24px;
    letter-spacing: 1px;
  }
}

未加入前样式效果

 border: 1px solid #fff;
//下面这个是防止抖动样式
 box-sizing: border-box !important;
overflow: hidden;

加入后样式效果

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！