premium 风格按钮

定义一个技术流畅的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);
}

效果如下：