按钮：当您将鼠标移开按钮时，悬停时显示的内容会下移

Question

我有一个按钮，将鼠标悬停在按钮上后，选择器中的内容（箭头）就会出现。内容（箭头）出现，但当我将鼠标从按钮上移开时，它会瞬间向下移动，然后消失。我想知道为什么会发生这种情况，以及我是否可以使其始终保持在一个垂直位置。

尝试编辑顶部来抵消调整，但无论如何它都会这样做

Codepen 在这里：https://codepen.io/mklingcoding/pen/vYvGwgr

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    /* Sets 1rem equal to 10px, 2rem equal to 20px, so on */
    font-size: 62.5%;
    background-color: #4731D3;
}

#projects-btn {
    font-size: 1.6rem;
    width: 200px;
    background: none;
    color: #CBF281;
    border: 1px solid #CBF281;
    border-radius: 5px;
    padding: 10px 0px;
    margin-top: 50px;
    transition: all 1s;
    overflow: hidden;
    text-align: center;
}

#projects-btn:after {
    display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f178";
    color: #CBF281;
    padding-left: 0px;
    transition: all 0.5s ease;
    opacity: 0;
}
  
#projects-btn:hover {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

#projects-btn:hover:after {
    opacity: 1;
    padding-left: 15px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button id="projects-btn">Projects</button>

Answer 1

该行为是因为您将

display: flex

和

justify-content: center

给了

#projects-btn:hover

。您可以删除它或将

justify-content: center;

和

align-items: center;

添加到

#projects-btn

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    /* Sets 1rem equal to 10px, 2rem equal to 20px, so on */
    font-size: 62.5%;
    background-color: #4731D3;
}

#projects-btn {
    font-size: 1.6rem;
    width: 200px;
    background: none;
    color: #CBF281;
    border: 1px solid #CBF281;
    border-radius: 5px;
    padding: 10px 0px;
    margin-top: 50px;
    transition: all 1s;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#projects-btn:after {
    display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f178";
    color: #CBF281;
    padding-left: 0px;
    transition: all 0.5s ease;
    opacity: 0;
}
  
#projects-btn:hover {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

#projects-btn:hover:after {
    opacity: 1;
    padding-left: 15px;
}