如何制作一个带阴影和可压缩的HTML框

Question

我想像这样制作一个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/

但我不知道如何翻译按钮的内容，使其看起来像被按下了。

Answer 1

我在这里找到答案： 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);
}