代码之家  ›  专栏  ›  技术社区  ›  kezey

取消悬停时过渡不缓和

  •  1
  • kezey  · 技术社区  · 8 年前

    我正在制作一个带有CSS下划线的简单按钮。所有其他减缓过渡都很好(悬停、缓入、取消悬停、缓出),但边界底部不会减缓。当你停止悬停时,它会简单地恢复到正常状态,而不会放松。

    https://codepen.io/anon/pen/jwgpdv

    .gbtn {
        background: #bba989;
        text-align: center;
        line-height: 150px;
        height: 150px;
        color: white;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12px;
        display: inline-block;
        transition: all .25s ease;
        box-sizing: border-box;
        font-family: "montserrat", serif;
        padding: 0px 30px;
    }
    
    .gbtn:hover {
        background-color: #aa9470;
        border-bottom: 150px solid #242424;
    }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Adam Jenkins    8 年前

    你在悬停之前没有定义边框,浏览器怎么会知道如何跳出?

    .gbtn {
     border-bottom: 0 solid #242424;
    }