premium 风格按钮

原创已于 2023-11-09 13:43:46 修改 · 157 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

收录于

于 2023-04-26 17:40:16 首次发布

前端专栏收录该内容

12 篇文章

订阅专栏

这段CSS代码定义了一个具有高级感和技术流畅性的按钮。在用户交互时，按钮颜色变化、边框、阴影和缩放动画提供了丰富的用户体验。hover状态下，背景色、边框颜色和阴影深度有所增强，同时按钮会轻微放大，增加视觉反馈。

定义一个技术流畅的premium 风格按钮,提供用户交互时的提升效果,展现出极高的技术流畅感。CSS文件通常会有很多这样的规则组合使用来达到丰富的UI风格。

.tech-button {
  background-color: #3f51b5;
  border-radius: 0 50% 50% 38%;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  transition: all 0.3s;
}

.tech-button:hover {
  background-color: #536dfe;
  border-radius: 0 50% 50% 38%;
  border-color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.38);
  transform: scale(1.1);
}

效果如下：