代码解读

    定义dom，容器是一个无序列表，列表项代表按钮：

    <ul>

    <li>home</li>

    </ul>

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(deepskyblue,navy);

    }

    去掉列表项前面的符号：

    ul{

    padding:0;

    list-style-type:none;

    }

    设置按钮的文字样式：

    ulli{

    color:#ddd;

    font-size:25px;

    font-family:sans-serif;

    text-transform:uppercase;

    }

    用伪元素在按钮的左侧增加一个方块：

    ulli{

    position:relative;

    }

    ulli::before{

    content:'';

    position:absolute;

    width:100%;

    height:100%;

    background:tomato;

    left:-100%;

    }

    用伪元素在按钮的右侧增加一条下划线：

    ulli::after{

    content:'';

    position:absolute;

    width:100%;

    height:0.2em;

    background:tomato;

    bottom:0;

    left:100%;

    }

    接下来设置鼠标悬停效果。

    当鼠标悬停时，左侧的方块移到文字所在位置：

    ulli::before{

    transition:0.4sease-out;

    }

    ulli:hover::before{

    left:100%;

    }

    右侧的下划线移到文字所在位置，它的动画时间延迟到方块的动画快结束时再开始：

    ulli::after{

    transition:0.3s0.3sease-out;

    }

    ulli:hover::after{

    left:0%;

    }

    同时，提高文字的亮度：

    ulli{

    transition:0.3s;

    cursor:pointer;

    }

    ulli:hover{

    color:#fff;

    }

    隐藏掉按钮外的部分，使方块和下划线在默认状态下都不可见，只有鼠标悬停时它们才从两侧入场：

    ulli{

    overflow:hidden;

    }

    最后，在dom中再增加几个按钮：

    <ul>

    <li>home</li>

    <li>products</li>

    <li>services</li>

    <li>contact</li>

    </ul>

    布局多个按钮：

    ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    }

    ulli{

    margin:0.5em;

    }