我有一个按钮,我需要它在悬停时呈闪电状
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
&:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: -4px -4px 4px rgba(250, 0, 20, 0.4);
但是按钮前面只有一个影子。怎么让阴影遍布按钮?
最佳答案
在 chrome 开发工具中,您可以使用可视化编辑器编辑 box-shadow
属性,
它非常有用,您可以构建任何您想要的阴影。
对于当前情况,不要忘记切换 :hover
元素状态
这是你的代码
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 20px 20px;
display: inline-block;
cursor: pointer;
transition: background-color .4s;
}
.button:hover {
color: white;
background: gray;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<a class='button'>Hello</a>
关于css - 如何使用CSS制作闪电按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46089678/