当前位置:   article > 正文

【前端系列】20种 Button 样式_前端按钮

前端按钮

在前端开发中,按钮(Button)是网页交互中常见的元素之一,其样式的设计直接影响着用户体验和界面美观度。本文将介绍20种不同的 Button 样式,旨在帮助前端开发者丰富按钮设计思路,提高用户界面的吸引力和可用性。

1. 默认样式

  1. .button {
  2. background-color: #007bff;
  3. color: #fff;
  4. border: 1px solid #007bff;
  5. }

2. 扁平样式

  1. .button {
  2. background-color: transparent;
  3. color: #007bff;
  4. border: none;
  5. }

3. 圆角样式

  1. .button {
  2. border-radius: 5px;
  3. }

4. 阴影样式

  1. .button {
  2. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  3. }

5. 渐变样式

  1. .button {
  2. background: linear-gradient(to right, #ff4e50, #f9d423);
  3. color: #fff;
  4. }

6. 边框样式

  1. .button {
  2. border: 1px solid #007bff;
  3. background-color: transparent;
  4. color: #007bff;
  5. }

7. 透明样式

  1. .button {
  2. background-color: transparent;
  3. color: #007bff;
  4. }

8. 图标样式

  1. .button {
  2. padding-left: 20px;
  3. background: url('icon.png') left center no-repeat;
  4. }

9. 悬浮样式

  1. .button:hover {
  2. background-color: #0056b3;
  3. }

10. 点击样式

  1. .button:active {
  2. transform: translateY(1px);
  3. }

11. 圆形样式

  1. .button {
  2. border-radius: 50%;
  3. }

12. 边框渐变样式

  1. .button {
  2. border: 1px solid transparent;
  3. background: linear-gradient(to right, #ff4e50, #f9d423);
  4. color: #fff;
  5. }

13. 悬浮渐变样式

  1. .button:hover {
  2. background: linear-gradient(to right, #ff4e50, #f9d423);
  3. color: #fff;
  4. }

14. 三维样式

  1. .button {
  2. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  3. }

15. 反向样式

  1. .button {
  2. background-color: #007bff;
  3. color: #fff;
  4. }
  5. .button:hover {
  6. background-color: transparent;
  7. color: #007bff;
  8. }

16. 边框圆角样式

  1. .button {
  2. border-radius: 20px;
  3. border: 1px solid #007bff;
  4. }

17. 悬浮阴影样式

  1. .button:hover {
  2. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  3. }

18. 打字机样式

  1. .button {
  2. overflow: hidden;
  3. }
  4. .button:after {
  5. content: ' ';
  6. display: inline-block;
  7. width: 0;
  8. animation: typing 3s steps(40, end);
  9. }
  10. @keyframes typing {
  11. from { width: 0; }
  12. to { width: 100%; }
  13. }

19. 灯泡样式

  1. .button {
  2. background: url('lightbulb.png') center center no-repeat;
  3. }

20. 鼓起样式

  1. .button {
  2. transform: scale(1.1);
  3. }

以上示例展示了每种 Button 样式对应的基本 CSS 样式。可以根据具体需求对这些样式进行调整和组合,以达到设计的效果。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/768381
推荐阅读
相关标签
  

闽ICP备14008679号