作者：舞倾城2010_217 | 来源：互联网 | 2022-12-27 15:42
我试图在我的输入按钮上添加线性效果.当用户将鼠标悬停在按钮上时,我希望底部边框线从中心开始,然后同时向右和向左移动.因此,当用户将鼠标悬停在其上时,该线从中心扩展到角落.
我设法添加了一个悬停线,但它不能按我的意愿工作.我环顾四周,我只能找到有关标题或标签的问题,而不是按钮.
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
}
#btn:hover {
cursor: pointer;
border-bottom: 2px solid red;
transition: 0.3s;
}
1> Temani Afif..：
你不能使用伪元素,因为它是一个输入标签(就像你可以在其他解决方案上找到的那样),所以你可以尝试这个解决方案linear-gradient作为背景:
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
background-image:linear-gradient(to right, red,red);
background-position:bottom center;
background-size:0% 2px;
background-repeat:no-repeat;
background-color:#ccc;
transition: 1s;
}
#btn:hover {
cursor: pointer;
background-size:100% 2px;
}
京公网安备 11010802041100号