Button tips

8.22'22

button 和 a 点击后的变化

:active 仅当按下鼠标左键或触摸屏幕时生效

  • button: :hover(mobile), :focus, :active

  • a: :link, :visited, :hover, :active

a:link { color: blue; }          /* Unvisited links */
a:visited { color: purple; }     /* Visited links */
a:hover { background: yellow; }  /* Hovered links */
a:active { color: red; }         /* Active links */
p:active { background: #eee; }   /* Active paragraphs */

This paragraph contains a link: This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.

涟漪 / ripple effect

纯 CSS 实现

<button class="ripple">BUTTON</button>
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

3d button box shadow

参考 codepen

<button class="btn">Button Text</button>
.btn {
  display: inline-block;
  background: #4285f4;
  color: #fff;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 5px;
  outline: none;
  border: none;

  box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
  transition: all ease-in-out 300ms;
}

.btn:hover {
  box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.2);
  transform: translate(0px, -10px) scale(1.2);
}

按钮按下效果 / button click effect

参考

Edit Button pressing effect

.btn {
  position: relative;
  top: 0;
  box-shadow: 0px 5px #028d96;

  text-align: center;
  background: #00ddeb;
  color: white;
}
.btn:hover {
  box-shadow: 0px 4px #006066;
  background: #01d1de;
}

/* Imitate a pressed effect for buttons */
.btn:active {
    top: 4px;
    box-shadow: 0px 0px;
}

📖