CSS常用按钮点击效果

CSS常用按钮点击效果

常用按钮(悬停/聚焦并按下 – 按住、松开、快速点击)动画效果。

HTML代码如下:

<button aria-label="heart" data-ico="💖" style="--hue: 344deg"></button>
<button aria-label="like" data-ico="👍" style="--hue: 247deg"></button>
<button aria-label="star" data-ico="⭐" style="--hue: 48deg"></button>

CSS代码如下:

body {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8vw;
  place-content: center;
  margin: 0;
  height: 100vh;
  background: #ecf0f4;
}

button {
  --i: var(--light, 0);
  --not-i: calc(1 - var(--i));
  --j: var(--press, 0);
  --not-j: calc(1 - var(--j));
  z-index: var(--i);
  border: none;
  width: 2em;
  height: 2em;
  border-radius: 15%;
  transform: scale(calc(1 - var(--j)*.02));
  box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
  background: #e8e8e8;
  font-size: 2.5em;
  transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
  cursor: pointer;
}
button::after {
  filter: Contrast(0) Sepia(var(--i)) Hue-Rotate(calc(var(--hue) - 50deg)) Saturate(5) Opacity(calc(var(--i) + .21*var(--not-i))) Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
  transition: filter 0.3s;
  content: attr(data-ico);
}
button:focus {
  outline: none;
}
button:hover, button:focus {
  --light: 1 ;
}
button:active {
  --press: 1 ;
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » CSS常用按钮点击效果

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们