Question

So I have button defined by the a-tag which says:

.button {
  background: #aaaaaa;
  padding: 20px 30px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 15px;
  box-shadow: 0px 3px 0px #999999;
  cursor: pointer;
}

.button:hover {
  background: #a1a1a1
}

.button:active {
  box-shadow: 0px 0px 0px #999999;
}

<a href="#" class="button">Click me</a>

So pretty straight forward. A button, a hover effect, and an active effect. However, what I would actually like is the effect of pushing the button. Now the box-shadow just disappears, but the button itself doesn't go "down" so to speak...

It's pretty easy with just a button, but I need this for a -button. Can it be done ? :)

Answer 1

您可以在按钮上添加position: relative，并在top: -1px上添加:active 1px最高偏移量。

＆＃13;

.button {
  background: #aaaaaa;
  padding: 20px 30px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 15px;
  box-shadow: 0px 3px 0px #999999;
  cursor: pointer;
  position: relative;
}

.button:hover {
  background: #a1a1a1
}

.button:active {
  top: -1px;
}

＆＃13;

<a href="#" class="button">Click me</a>

＆＃13;

Answer 2

您可以像这样手动执行此操作：

.button {
padding: 15px 25px;


font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3

或者您也可以通过物化包使用材料设计：

https://www.w3schools.com/w3css/w3css_material.asp

这是按钮的示例：

<a class="waves-effect waves-light btn">button</a>

http://materializecss.com/buttons.html

Answer 3

您可以使用变换比例属性。这会产生一种幻觉，即按钮被点击，因为它在活动时会变小。

.button {
      transition: all 1s;
}
.button:active {
     transform:scale(0.8,0.8);
}

https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale

<a> button

3 个答案: