btn.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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. &-small {
  22. padding: 12rpx 21rpx;
  23. height: 45rpx;
  24. font-size: 20rpx;
  25. }
  26. }
  27. .btn-primary {
  28. color: #FFFFFF;
  29. background: #398CFF;
  30. border-color: #398CFF;
  31. }
  32. .btn-success {
  33. color: #FFFFFF;
  34. background: #67c23a;
  35. border-color: #67c23a;
  36. }
  37. .btn-info {
  38. color: #FFFFFF;
  39. background: #D2D2D2;
  40. border-color: #D2D2D2;
  41. }
  42. .btn-warning {
  43. color: #FFFFFF;
  44. background: #FFBD7C;
  45. border-color: #FFBD7C;
  46. }
  47. .btn-danger {
  48. color: #FFFFFF;
  49. background: #f56c6c;
  50. border-color: #f56c6c;
  51. }
  52. .btn-primary-pain {
  53. color: #409eff;
  54. background: #FFFFFF;
  55. border-color: #b3d8ff;
  56. }
  57. .btn-success-pain {
  58. background: #FFFFFF;
  59. color: #c2e7b0;
  60. border-color: #c2e7b0;
  61. }
  62. .btn-info-pain {
  63. background: rgb(244, 244, 245);
  64. color: #909399;
  65. }
  66. .btn-warning-pain {
  67. color: #e6a23c;
  68. background: rgb(253, 246, 236);
  69. border-color: #e6a23c;
  70. }
  71. .btn-danger-pain {
  72. color: #FF5767;
  73. background: #FFFFFF;
  74. border-color: #FF8A95;
  75. }
  76. .btn.btn-radius {
  77. border-radius: 100rpx;
  78. }
  79. /* 无样式button (用于伪submit) */
  80. .btn-normal {
  81. display: block;
  82. margin: 0;
  83. padding: 0;
  84. line-height: normal;
  85. background: none;
  86. border-radius: 0;
  87. box-shadow: none;
  88. border: none;
  89. font-size: unset;
  90. text-align: unset;
  91. overflow: visible;
  92. color: inherit;
  93. }
  94. .btn-normal:after {
  95. border: none;
  96. }
  97. .btn-normal.button-hover {
  98. color: inherit;
  99. }
  100. button:after {
  101. content: none;
  102. border: none;
  103. }