感谢 灵感来源自 https://markodenic.com/tools/buttons-generator/

文档地址 https://zhanggenyuan.gitee.io/buttons-generator-docs/

安装插件 npm install rollup rollup-plugin-postcss postcss postcss-preset-env --save-dev

Node v16.18.0

3d

$bgcolor-3d-rose: #ff6392;
$shadowColor-3d-rose: #ff0a78;

$bgcolor-3d-blue: #3d348b;
$shadowColor-3d-blue: #2c0b8e;

$bgcolor-3d-sky: #3a86ff;
$shadowColor-3d-sky: #4433ff;

$bgcolor-3d-red: #ef233c;
$shadowColor-3d-red: #d90429;

$bgcolor-3d-green: #80ed99;
$shadowColor-3d-green: #57cc99;

$bgcolor-3d-yellow: #ffe566;
$shadowColor-3d-yellow: #ffd819;

$bgcolor-3d-sand: #ced4da;
$shadowColor-3d-sand: #adb5bd;

$bgcolor-3d-grey: #6c757d;
$shadowColor-3d-grey: #495057;

$bgcolor-3d-black: #343a40;
$shadowColor-3d-black: #212529;

@mixin buttons-generator-3d-common($bgColor, $shadowColor) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: $bgColor;
  box-shadow: 0 5px $shadowColor;
  &:hover {
    box-shadow: 0 3px $shadowColor;
    top: 1px;
  }
  &:active {
    box-shadow: 0 0 $shadowColor;
    top: 5px;
  }
}

$buttons-generator-3ds: (
  $bgcolor-3d-rose,
  $shadowColor-3d-rose,
  $bgcolor-3d-blue,
  $shadowColor-3d-blue,
  $bgcolor-3d-sky,
  $shadowColor-3d-sky,
  $bgcolor-3d-red,
  $shadowColor-3d-red,
  $bgcolor-3d-green,
  $shadowColor-3d-green,
  $bgcolor-3d-yellow,
  $shadowColor-3d-yellow,
  $bgcolor-3d-sand,
  $shadowColor-3d-sand,
  $bgcolor-3d-grey,
  $shadowColor-3d-grey,
  $bgcolor-3d-black,
  $shadowColor-3d-black
);

$buttons-generator-3d-colors: rose, blue, sky, red, green, yellow, sand, grey,
  black;

@for $i from 1 through length($buttons-generator-3d-colors) {
  .buttons-generator-3d--#{$i} {
    @include buttons-generator-3d-common(
      nth($buttons-generator-3ds, 2 * $i - 1),
      nth($buttons-generator-3ds, 2 * $i)
    );
  }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-3d--1|类名|1至9,分别buttons-generator-3d--1,buttons-generator-3d--2 以此类推|string|-|

gradient

$gradient-left-color-1: #4ecdc4;
$gradient-right-color-1: #c797eb;

$gradient-left-color-2: #bdc3c7;
$gradient-right-color-2: #2c3e50;

$gradient-left-color-3: #f8b500;
$gradient-right-color-3: #fceabb;

$gradient-left-color-4: #43cea2;
$gradient-right-color-4: #185a9d;

$gradient-left-color-5: #000428;
$gradient-right-color-5: #004e92;

$gradient-left-color-6: #f0ecfc;
$gradient-right-color-6: #c797eb;

$gradient-left-color-7: #c02425;
$gradient-right-color-7: #f0cb35;

$gradient-left-color-8: #7b4397;
$gradient-right-color-8: #dc2430;

$gradient-left-color-9: #833ab4;
$gradient-right-color-9: #fd1d1d;

$gradient-colors: (
  $gradient-left-color-1,
  $gradient-right-color-1,
  $gradient-left-color-2,
  $gradient-right-color-2,
  $gradient-left-color-3,
  $gradient-right-color-3,
  $gradient-left-color-4,
  $gradient-right-color-4,
  $gradient-left-color-5,
  $gradient-right-color-5,
  $gradient-left-color-6,
  $gradient-right-color-6,
  $gradient-left-color-7,
  $gradient-right-color-7,
  $gradient-left-color-8,
  $gradient-right-color-8,
  $gradient-left-color-9,
  $gradient-right-color-9
);

@mixin buttons-generator-gradient--common($left, $right) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background-size: 120% auto;
  background-image: linear-gradient(315deg, $left 0%, $right 75%);
  &:hover {
    background-position: right center;
  }
  &:active {
    top: 2px;
  }
}

@for $i from 1 through 9 {
  .buttons-generator-gradient--#{$i} {
    @include css-button-gradient--common(
      nth($gradient-colors, 2 * $i - 1),
      nth($gradient-colors, 2 * $i)
    );
  }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-gradient--1|类名|1至9,分别buttons-generator-gradient--1,buttons-generator-gradient--2 以此类推|string|-|

shadow-border

$bgColor-1: #ff0a78;
$shadowColor-1: #ff6392;

$bgColor-2: #2c0b8e;
$shadowColor-2: #3d348b;

$bgColor-3: #4433ff;
$shadowColor-3: #3a86ff;

$bgColor-4: #d90429;
$shadowColor-4: #ef233c;

$bgColor-5: #57cc99;
$shadowColor-5: #80ed99;

$bgColor-6: #ffd819;
$shadowColor-6: #ffe566;

$bgColor-7: #adb5bd;
$shadowColor-7: #ced4da;

$bgColor-8: #495057;
$shadowColor-8: #6c757d;

$bgColor-9: #212529;
$shadowColor-9: #343a40;

$shadow-border-buttons: (
  $bgColor-1,
  $shadowColor-1,
  $bgColor-2,
  $shadowColor-2,
  $bgColor-3,
  $shadowColor-3,
  $bgColor-4,
  $shadowColor-4,
  $bgColor-5,
  $shadowColor-5,
  $bgColor-6,
  $shadowColor-6,
  $bgColor-7,
  $shadowColor-7,
  $bgColor-8,
  $shadowColor-8,
  $bgColor-9,
  $shadowColor-9
);

@mixin buttons-generator-shadow-border--common($bgColor, $hoverColor) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  background: $bgColor;
  &:hover {
    background-color: $hoverColor;
  }
  &:active {
    top: 2px;
  }
}

@for $i from 1 through 9 {
  .buttons-generator-shadow-border--#{$i} {
    @include buttons-generator-shadow-border--common(
      nth($shadow-border-buttons, 2 * $i - 1),
      nth($shadow-border-buttons, 2 * $i)
    );
  }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-shadow-border--1|类名|1至9,分别buttons-generator-shadow-border--1,buttons-generator-shadow-border--2 以此类推|string|-|

retro

@mixin buttons-generator-retro--common($bgColor) {
    min-width: 130px;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border: 1px solid #000;
    color: #000;
    background: transparent;
    z-index: 0;
    &:hover:after {
      top: 0;
      left: 0;
    }
    &:after {
      content: "";
      width: 100%;
      z-index: -1;
      position: absolute;
      height: 100%;
      top: 5px;
      left: 5px;
      transition: 0.2s;
      background-color: $bgColor;
    }
}

$retroBgColors:#ff6392,#3d348b,#3a86ff,#ef233c,#80ed99,#ffe566,#ced4da,#6c757d,#343a40;

@for $i from 1 through length($retroBgColors){
    $bgColor:nth($retroBgColors,$i);
    .buttons-generator-retro--#{$i}{
        @include buttons-generator-retro--common($bgColor);
    }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-retro--1|类名|1至9,分别buttons-generator-retro--1,buttons-generator-retro--2 以此类推|string|-|

shadow-border-sliding-effect

$bgColor-1: #ff0a78;
$shadowColor-1: #ff6392;

$bgColor-2: #2c0b8e;
$shadowColor-2: #3d348b;

$bgColor-3: #4433ff;
$shadowColor-3: #3a86ff;

$bgColor-4: #d90429;
$shadowColor-4: #ef233c;

$bgColor-5: #57cc99;
$shadowColor-5: #80ed99;

$bgColor-6: #ffd819;
$shadowColor-6: #ffe566;

$bgColor-7: #adb5bd;
$shadowColor-7: #ced4da;

$bgColor-8: #495057;
$shadowColor-8: #6c757d;

$bgColor-9: #212529;
$shadowColor-9: #343a40;

$shadow-border-buttons: (
  $bgColor-1,
  $shadowColor-1,
  $bgColor-2,
  $shadowColor-2,
  $bgColor-3,
  $shadowColor-3,
  $bgColor-4,
  $shadowColor-4,
  $bgColor-5,
  $shadowColor-5,
  $bgColor-6,
  $shadowColor-6,
  $bgColor-7,
  $shadowColor-7,
  $bgColor-8,
  $shadowColor-8,
  $bgColor-9,
  $shadowColor-9
);

@mixin buttons-generator-shadow-border-sliding--common($bgColor, $shadowColor) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  background: $bgColor;
  z-index: 1;
  &:hover::after {
    width: 100%;
    left: 0;
  }
  &:after {
    border-radius: 5px;
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    z-index: -1;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: $shadowColor;
    right: 0;
  }
  &:active {
    top: 2px;
  }
}

@for $i from 1 through 9 {
  .buttons-genarator-shadow-border-sliding--#{$i} {
    @include buttons-generator-shadow-border-sliding--common(
      nth($shadow-border-buttons, 2 * $i - 1),
      nth($shadow-border-buttons, 2 * $i)
    );
  }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-genarator-shadow-border-sliding--1|类名|1至9,分别buttons-genarator-shadow-border-sliding--1,buttons-genarator-shadow-border-sliding--2 以此类推|string|-|

buttons-generator-sliding-left-to-right

$leftToRightColors:#ff0a78,#2c0b8e,#4433ff,#d90429,#57cc99,#ffd819,#adb5bd,#495057,#212529;

@mixin buttons-generator-sliding-left-to-right--common($bgC) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  z-index: 0;
  background: #fff;
  overflow: hidden;
  border: 2px solid $bgC;
  color: $bgC;
  &:hover {
    color: #fff;
  }
  &:hover:after {
    width: 100%;
  }
  &:after {
    content: "";
    position: absolute;
    z-index: -1;
    transition: all 0.3s ease;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: $bgC;
  }
}

@for $i from 1 through length($leftToRightColors){
    .buttons-generator-sliding-left-to-right--#{$i} {
        @include buttons-generator-sliding-left-to-right--common(
            nth($leftToRightColors,$i)
        )
    }
}

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-sliding-left-to-right--1|类名|1至9,分别buttons-generator-sliding-left-to-right--1,buttons-generator-sliding-left-to-right--2 以此类推|string|-|

buttons-generator-sliding-right-to-left

$leftToRightColors:#ff0a78,#2c0b8e,#4433ff,#d90429,#57cc99,#ffd819,#adb5bd,#495057,#212529;

@mixin buttons-generator-sliding-left-to-right--common($bgC) {
    min-width: 130px;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    z-index: 0;
    background: #fff;
    overflow: hidden;
    border: 2px solid $bgC;
    color: $bgC;
    &:hover {
        color: #fff;
      }
     &:hover:after {
        width: 100%;
      }
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        transition: all 0.3s ease;
        right: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: $bgC;
      }
}

@for $i from 1 through length($leftToRightColors){
    .buttons-generator-sliding-right-to-left--#{$i} {
        @include buttons-generator-sliding-left-to-right--common(
            nth($leftToRightColors,$i)
        )
    }
}



  

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| |buttons-generator-sliding-right-to-left--1|类名|1至9,分别buttons-generator-sliding-right-to-left--1,buttons-generator-sliding-right-to-left--2 以此类推|string|-|