如何制作带阴影且可按下的 HTML 框
Howto make an HTML box with shadow and pressable
我想制作一个像这样的 HTML 小部件:
https://jsfiddle.net/api/mdn/
.simple {
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
但我希望它是可按下的,以便它变平 1 秒并重定向到不同的 URL。
编辑:
我尝试了以下方法:
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
<button>Press me!</button>
https://jsfiddle.net/z7a0v8uv/
但我不知道如何翻译按钮的内容,使它看起来像被按下。
我在这里找到了答案:
https://www.w3schools.com/howto/howto_css_animate_buttons.asp
我在寻找:
translateX(...) translateY(...)
正如我们在这个工作示例中看到的那样:
https://jsfiddle.net/z7a0v8uv/1/
现在我只需要将其与正确的样式集成即可。
编辑:
这是完整的 CSS 代码:
button {
width: 100%;
border: none;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
transform: translateY(3px) translateX(3px);
}
我想制作一个像这样的 HTML 小部件: https://jsfiddle.net/api/mdn/
.simple {
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
但我希望它是可按下的,以便它变平 1 秒并重定向到不同的 URL。
编辑:
我尝试了以下方法:
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
<button>Press me!</button>
https://jsfiddle.net/z7a0v8uv/
但我不知道如何翻译按钮的内容,使它看起来像被按下。
我在这里找到了答案: https://www.w3schools.com/howto/howto_css_animate_buttons.asp
我在寻找:
translateX(...) translateY(...)
正如我们在这个工作示例中看到的那样:
https://jsfiddle.net/z7a0v8uv/1/
现在我只需要将其与正确的样式集成即可。
编辑:
这是完整的 CSS 代码:
button {
width: 100%;
border: none;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
transform: translateY(3px) translateX(3px);
}