这篇文章主要介绍了怎么用纯CSS实现小球变矩形背景的按钮悬停效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码解读
定义dom，导航中包含一个无序列表，列表中有一个列表项：
<nav>
<ul>
<li>home</li>
</ul>
</nav>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:lightyellow;
}
隐藏列表项前端的引导符号：
navul{
padding:0;
list-style-type:none;
}
设置容器尺寸：
navli{
width:8em;
height:2em;
font-size:25px;
}
设置文字样式：
navli{
font-size:25px;
text-align:center;
line-height:2em;
font-family:sans-serif;
text-transform:capitalize;
}
添加伪元素，伪元素是2个小球：
navli{
position:relative;
}
navli::before,
navli::after{
content:'';
position:absolute;
width:0.6em;
height:0.6em;
background-color:gainsboro;
border-radius:50%;
}
把小球定位在左右两端：
navli::before{
top:calc(50%-0.6em/2);
left:0;
}
navli::after{
bottom:calc(50%-0.6em/2);
right:0;
}
接下来设置按钮悬停效果。
当鼠标悬停在按钮上时，让小球变为与容器大小相等的矩形：
navli:hover::before,
navli:hover::after{
width:100%;
height:100%;
border-radius:0;
}
第其中一个矩形稍向右下角错位，并且加深它的颜色，形成阴影效果：
navli:hover::before{
z-index:-1;
top:0;
}
navli:hover::after{
z-index:-2;
bottom:-0.4em;
right:-0.4em;
filter:brightness(0.8);
}
设置悬停的颜色，伪元素的矩形背景变为蓝色，文字变为白色：
navli:hover{
color:white;
}
navli:hover::before,
navli:hover::after{
background-color:dodgerblue;
}
设置缓动时间，其中伪元素的缓动时间函数用拟人的动画效果：
navli{
transition:0.5s;
}
navli::before,
navli::after{
transition:0.5scubic-bezier(0.5,-0.5,0.25,1.5);
}
再增加几个按钮：
<nav>
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
最后，增加按钮之间的间距：
navli{
margin:0.8em;
}
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现小球变矩形背景的按钮悬停效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
