效果演示

当鼠标悬停在按钮上时，按钮会显示一个黑色背景，并且背景上会滑动出现文字 “若冰说CSS”。按钮的样式包括黑色边框、黑色文字，以及指定的字体大小和粗细。这个效果可以用于文章摘要中的按钮，以吸引读者的注意力并增加交互性。鼠标悬停时的动画效果使按钮更加生动有趣，同时改变文字颜色为白色，增强了按钮的可读性。

Code

<a href="#">Hover Me</a>

body {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
    color: black;
    font-family: fans-serif;
    font-size: 40px;
    font-weight: bold;
    border: 2px solid black;
    padding: 40px 80px;
    position: relative;
    overflow: hidden;
}
a:before {
    content: "若冰说CSS";
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    transform: translate(-100%);
    transition: all 1s;
    z-index: -1;
}
a:hover:before {
    transform: translateX(0);
}
a:hover {
    color: white;
}

实现思路拆分

body {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

• 设置 body 元素的高度为 400 像素，并使用 flexbox 居中显示 body 元素的内容。

a {
    text-decoration: none;
    color: black;
    font-family: fans-serif;
    font-size: 40px;
    font-weight: bold;
    border: 2px solid black;
    padding: 40px 80px;
    position: relative;
    overflow: hidden;
}`

• 设置链接元素的样式： 移除默认的下划线装饰。 设置文字颜色为黑色。 设置字体为 “fans-serif”。 设置字体大小为 40 像素。 设置字体加粗。 添加黑色边框，边框宽度为 2 像素。 设置内边距为 40 像素的上下边距和 80 像素的左右边距。 设置为相对定位。 隐藏溢出的内容。

a:before {
    content: "若冰说CSS";
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    transform: translate(-100%);
    transition: all 1s;
    z-index: -1;
}

• 为链接元素添加伪元素 ::before： 设置伪元素的内容为 “若冰说CSS”。 设置伪元素的字体大小为 20 像素。 设置伪元素的绝对定位，相对于链接元素。 将伪元素的左上角定位在链接元素的左上角。 设置伪元素的高度和宽度为链接元素的 100%。 设置伪元素的背景颜色为黑色。 使用 translate(-100%) 变换将伪元素向左移动其自身宽度的 100%。 添加所有属性的过渡效果，过渡时间为 1 秒。 将伪元素的层级设置为 -1，将其放置在链接元素的下方。

a:hover:before {
    transform: translateX(0);
}

• 当鼠标悬停在链接元素上时，将伪元素的 transform 属性设置为 translateX(0) ，使伪元素回到原始位置，显示黑色背景。

a:hover {
    color: white;
}

• 当鼠标悬停在链接元素上时，将链接元素的文字颜色设置为白色。