btn.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. .btn {
  2. border: 2rpx solid #c0c4cc;
  3. color: #606266;
  4. background: #FFFFFF;
  5. display: inline-flex;
  6. height: 90rpx;
  7. justify-content: center;
  8. align-items: center;
  9. white-space: nowrap;
  10. cursor: pointer;
  11. -webkit-appearance: none;
  12. text-align: center;
  13. box-sizing: border-box;
  14. outline: none;
  15. margin: 0;
  16. font-weight: 400;
  17. user-select: none;
  18. vertical-align: middle;
  19. font-size: 27rpx;
  20. border-radius: 5px;
  21. padding: 0 20rpx;
  22. &-small {
  23. padding: 12rpx 21rpx;
  24. height: 45rpx;
  25. font-size: 20rpx;
  26. }
  27. }
  28. .btn-primary {
  29. color: #FFFFFF;
  30. background: #398CFF;
  31. border-color: #398CFF;
  32. }
  33. .btn-success {
  34. color: #FFFFFF;
  35. background: #67c23a;
  36. border-color: #67c23a;
  37. }
  38. .btn-info {
  39. color: #FFFFFF;
  40. background: #D2D2D2;
  41. border-color: #D2D2D2;
  42. }
  43. .btn-warning {
  44. color: #FFFFFF;
  45. background: #FFBD7C;
  46. border-color: #FFBD7C;
  47. }
  48. .btn-danger {
  49. color: #FFFFFF;
  50. background: #f56c6c;
  51. border-color: #f56c6c;
  52. }
  53. .btn-primary-pain {
  54. color: #409eff;
  55. background: #FFFFFF;
  56. border-color: #b3d8ff;
  57. }
  58. .btn-success-pain {
  59. background: #FFFFFF;
  60. color: #c2e7b0;
  61. border-color: #c2e7b0;
  62. }
  63. .btn-info-pain {
  64. background: rgb(244, 244, 245);
  65. color: #909399;
  66. }
  67. .btn-warning-pain {
  68. color: #e6a23c;
  69. background: rgb(253, 246, 236);
  70. border-color: #e6a23c;
  71. }
  72. .btn-danger-pain {
  73. color: #FF5767;
  74. background: #FFFFFF;
  75. border-color: #FF8A95;
  76. }
  77. .btn.btn-radius {
  78. border-radius: 100rpx;
  79. }
  80. /* 无样式button (用于伪submit) */
  81. .btn-normal {
  82. display: block;
  83. margin: 0;
  84. padding: 0;
  85. line-height: normal;
  86. background: none;
  87. border-radius: 0;
  88. box-shadow: none;
  89. border: none;
  90. font-size: unset;
  91. text-align: unset;
  92. overflow: visible;
  93. color: inherit;
  94. }
  95. .btn-normal:after {
  96. border: none;
  97. }
  98. .btn-normal.button-hover {
  99. color: inherit;
  100. }
  101. button:after {
  102. content: none;
  103. border: none;
  104. }