scss和less按钮文件

scss

用于elementui

button { border: 0px; border-radius: 3px; margin: 0px 4px; padding: 7px 15px; cursor: pointer; line-height:1; font-size:12px; transition: all 0.2s ease-in-out; outline:none; background-color: transparent; } $btn-primary-color: #2962FF; $btn-link-color: #1890ff; $btn-success-color: #52c41a; $btn-warning-color: #faad14; $btn-danger-color: #fa541c; $btn-info-color: #8c8c8c; $text-color:#fff; .btn-select{ color: $btn-primary-color; border: 1px solid $btn-primary-color; opacity: 0.5; &:hover { opacity: 1; } } .btn-logout{ color: $btn-primary-color; font-size:14px; &:hover { transform: scale(0.8); } } .btn-confirm{ color: $text-color; background-color: $btn-primary-color; &:hover { opacity: 0.8; } } .btn-cancel{ color: $btn-info-color; border: 1px solid $btn-info-color; &:hover { opacity: 0.8; } } .btn-fill-primary{ color: $text-color; background-color: $btn-primary-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-link{ color: $text-color; background-color: $btn-link-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-success{ color: $text-color; background-color: $btn-success-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-warning{ color: $text-color; background-color: $btn-warning-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-danger{ color: $text-color; background-color: $btn-danger-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-info{ color: $text-color; background-color: $btn-info-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-border-primary{ color: $btn-primary-color; border: 1px solid $btn-primary-color; &:hover { color: $text-color; background-color: $btn-primary-color; } } .btn-border-link{ color: $btn-link-color; border: 1px solid $btn-link-color; &:hover { color: $text-color; background-color: $btn-link-color; } } .btn-border-success{ color: $btn-success-color; border: 1px solid $btn-success-color; &:hover { color: $text-color; background-color: $btn-success-color; } } .btn-border-warning{ color: $btn-warning-color; border: 1px solid $btn-warning-color; &:hover { color: $text-color; background-color: $btn-warning-color; } } .btn-border-danger{ color: $btn-danger-color; border: 1px solid $btn-danger-color; &:hover { color: $text-color; background-color: $btn-danger-color; } } .btn-border-info{ color: $btn-info-color; border: 1px solid $btn-info-color; &:hover { color: $text-color; background-color: $btn-info-color; } } .btn-text-primary{ color: $btn-primary-color; &:hover { opacity: 0.8; } } .btn-text-link{ color: $btn-link-color; &:hover { opacity: 0.8; } } .btn-text-success{ color: $btn-success-color; &:hover { opacity: 0.8; } } .btn-text-warning{ color: $btn-warning-color; &:hover { opacity: 0.8; } } .btn-text-danger{ color: $btn-danger-color; &:hover { opacity: 0.8; } } .btn-text-info{ color: $btn-info-color; &:hover { opacity: 0.8; } }

less

用于ant-design-vue

button { border: 0px; border-radius: 3px; margin: 0px 4px; padding: 7px 15px; cursor: pointer; line-height:1; font-size:12px; transition: all 0.2s ease-in-out; outline:none; background-color: transparent; } @btn-primary-color: #2962FF; @btn-link-color: #1890ff; @btn-success-color: #52c41a; @btn-warning-color: #faad14; @btn-danger-color: #fa541c; @btn-info-color: #8c8c8c; @text-color:#fff; .btn-select{ color: @btn-primary-color; border: 1px solid @btn-primary-color; opacity: 0.5; &:hover { opacity: 1; } } .btn-logout{ color: @btn-primary-color; font-size:14px; &:hover { transform: scale(0.8); } } .btn-confirm{ color: @text-color; background-color: @btn-primary-color; &:hover { opacity: 0.8; } } .btn-cancel{ color: @btn-info-color; border: 1px solid @btn-info-color; &:hover { opacity: 0.8; } } .btn-fill-primary{ color: @text-color; background-color: @btn-primary-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-link{ color: @text-color; background-color: @btn-link-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-success{ color: @text-color; background-color: @btn-success-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-warning{ color: @text-color; background-color: @btn-warning-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-danger{ color: @text-color; background-color: @btn-danger-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-fill-info{ color: @text-color; background-color: @btn-info-color; opacity: 0.8; &:hover { opacity: 1; } } .btn-border-primary{ color: @btn-primary-color; border: 1px solid @btn-primary-color; &:hover { color: @text-color; background-color: @btn-primary-color; } } .btn-border-link{ color: @btn-link-color; border: 1px solid @btn-link-color; &:hover { color: @text-color; background-color: @btn-link-color; } } .btn-border-success{ color: @btn-success-color; border: 1px solid @btn-success-color; &:hover { color: @text-color; background-color: @btn-success-color; } } .btn-border-warning{ color: @btn-warning-color; border: 1px solid @btn-warning-color; &:hover { color: @text-color; background-color: @btn-warning-color; } } .btn-border-danger{ color: @btn-danger-color; border: 1px solid @btn-danger-color; &:hover { color: @text-color; background-color: @btn-danger-color; } } .btn-border-info{ color: @btn-info-color; border: 1px solid @btn-info-color; &:hover { color: @text-color; background-color: @btn-info-color; } } .btn-text-primary{ color: @btn-primary-color; &:hover { opacity: 0.8; } } .btn-text-link{ color: @btn-link-color; &:hover { opacity: 0.8; } } .btn-text-success{ color: @btn-success-color; &:hover { opacity: 0.8; } } .btn-text-warning{ color: @btn-warning-color; &:hover { opacity: 0.8; } } .btn-text-danger{ color: @btn-danger-color; &:hover { opacity: 0.8; } } .btn-text-info{ color: @btn-info-color; &:hover { opacity: 0.8; } }