0

我正在尝试使用我在我的网站上的 CodePen.io 上找到的一些按钮样式。我正在使用 Divi 和 WordPress。任何帮助是极大的赞赏。CodePen 的代码是https://codepen.io/b1tn3r/pen/YjOzRv，代码如下：

我只添加了 CSS。我不能添加更多，否则它不会让我发布。

CSS：

//
// ---Retro Button---
//
.retro-btn {
  text-transform: uppercase;
  background: 0 0;
  
  &.lg {
    .btn {
      width: 294px;
      height: 54px;
      font-size: 17px;
      line-height: 50px;
      
      .btn-inner .content-wrapper .btn-content .btn-content-inner:before {
        padding-top: 0;
        letter-spacing: .15em;
      }
    }
  }
  &.sm {
    .btn {
      width: 165px;
      height: 37px;
      font-size: 10.5px;
      line-height: 32.5px;

      .btn-inner .content-wrapper .btn-content .btn-content-inner:before {
        padding-top: 0;
      }
    }
  }
  
  &.primary {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #051D41;
      }
      .btn-content {
        background-color: #0d47a1;
      }
    }
  }
  &.secondary {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #263238;
      }
      .btn-content {
        background-color: #37474F;
      }
    }
  }
  &.danger {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #590000;
      }
      .btn-content {
        background-color: #CC0000;
      }
    }
  }
  &.warning {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #6A3800;
      }
      .btn-content {
        background-color: #FF8800;
      }
    }
  }
  &.success {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #00481F;
      }
      .btn-content {
        background-color: #009A3E;
      }
    }
  }
  &.info {
    .btn .btn-inner .content-wrapper {
      &:before {
        background-color: #164E62;
      }
      .btn-content {
        background-color: #33b5e5;
      }
    }
  }

  .btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding-top: 3px;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-style: normal;
    letter-spacing: 0;
    text-rendering: auto;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity .1s ease-out;
    transition: opacity .1s ease-out;
    z-index: 5;
    -webkit-font-smoothing: antialiased;

    // size
    width: 240px;
    height: 46px;
    font-size: 12px;
    line-height: 24px;
    
    background-color: transparent;
    text-decoration-color: initial;
    border-color: initial;
    -webkit-tap-highlight-color: transparent;

    &, &:focus {
      outline-color: 0;
      outline-style: none;
      outline-width: 0;
    }

    &:hover {
      .btn-content-inner:before {
        background-color: rgba(13,13,13,.1);
      }
    }

    &:before {
      content: " ";
      background-color: rgba(13, 13, 13, .3);
      width: calc(100% - 2px);
      height: calc(100% - 4px);
      bottom: -1px;
      left: 1px;
      position: absolute;
      border-radius: 3px;
      z-index: 1;
      -webkit-transition: background .12s ease-out, -webkit-transform .12s ease-out;
      transition: background .12s ease-out, -webkit-transform .12s ease-out;
      transition: transform .12s ease-out, background .12s ease-out;
      transition: transform .12s ease-out, background .12s ease-out, -webkit-transform .12s ease-out;
    }

    &.btn-left {
      &:before {
        -webkit-transform: skewY(1deg) translate3d(0,-.5px,0);
        transform: skewY(1deg) translate3d(0,-.5px,0);
      }

      .btn-content {
        -webkit-transform: skewY(-1deg);
        transform: skewY(-1deg);
      }
    }

    &.btn-right {
      &:before {
        -webkit-transform: skewY(-1deg) translate3d(0,-.5px,0);
        transform: skewY(-1deg) translate3d(0,-.5px,0);
      }

      .btn-content {
        -webkit-transform: skewY(1deg);
        transform: skewY(1deg);
      }
    }

    &.btn-center {
      &:before {
        -webkit-transform: translate3d(0,-1px,0);
        transform: translate3d(0,-1px,0);
      }

      .btn-content {
        -webkit-transform: translate3d(0,1px,0);
        transform: translate3d(0,1px,0);
      }
    }

    &.btn-active {
      .btn-inner .content-wrapper .btn-content {
        -webkit-transition: background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        transition: background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        transition: transform .12s ease-out,background .12s ease-out,color .12s ease-out;
        transition: transform .12s ease-out,background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        -webkit-transform: translate3d(0,2px,0);
        transform: translate3d(0,2px,0);

        .btn-content-inner {
          opacity: .1;
        }
      }

      &:before {
        -webkit-transform: translate3d(0,-3px,0);
        transform: translate3d(0,-3px,0);
      }
    }

    .btn-inner {
      display: block;
      height: 100%;

      .content-wrapper {
        position: relative;
        font-family: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
        height: calc(100% - 3px);
        margin-top: -3px;

        &:after, &:before, 
        & .btn-content:after, 
        & .btn-content:before, 
        & .btn-content .btn-content-inner:before {
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        &:before {
          background-image: initial;
          background-color: #004d40;

          content: " ";
          border-radius: 3px;
          top: auto;
          bottom: -3px;
          z-index: 1;
          -webkit-transition: background .185s ease-out, -webkit-transform .185s ease-out;
          transition: background .185s ease-out, -webkit-transform .185s ease-out;
          transition: transform .185s ease-out, background .185s ease-out;
          transition: transform .185s ease-out, background .185s ease-out, -webkit-transform .185s ease-out;
        }

        &:after {
          background-color: rgba(13, 13, 13, 0.15);

          content: " ";
          border-radius: 3px;
          z-index: 3;
          width: 0;
          top: 2px;
        }

        .btn-content {
          background-image: initial;
          background-color: #26a69a;
          color: #ebf1f8;

          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          border-radius: 3px;
          text-indent: 0;
          z-index: 3;
          overflow: hidden;
          padding: 0 16px;
          -webkit-transition: border .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          transition: border .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          transition: border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out;
          transition: border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          
          &:before, &:after {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            color: rgba(255,255,255,.8);
            opacity: 0;
            -webkit-transition: opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
            transition: opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
            transition: transform .185s ease-out .05s, opacity .1125s ease-out .05s;
            transition: transform .185s ease-out .05s, opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
          }

          &:before {
            content: " ";
            -webkit-transform: translate3d(0,50%,0);
            transform: translate3d(0,50%,0);
          }

          &:after {
            content: " ";
            -webkit-transform: translate3d(0,-50%,0);
            transform: translate3d(0,-50%,0);
          }


          .btn-content-inner {
            display: block;
            -webkit-transition: opacity 75ms ease-out .1125s;
            transition: opacity 75ms ease-out .1125s;

            &:before {
              content: attr(label);
              padding-top: 9.5px;
              font-size: .8em;
              font-family: 'Press Start 2P', cursive;
              letter-spacing: .06em;
              -webkit-transition: opacity .3s ease-out, background-color .1125s ease-in;
              transition: opacity .3s ease-out, background-color .1125s ease-in;
              opacity: 1;
              z-index: -1;
            }
          }
        }
      }
    }
  }
}
4

1 回答 1

1

您可以通过以下方式使用 Divi 主题将自定义 CSS 添加到 Wordpress 网站：

  1. 在管理区域的左侧菜单中转到“Divi”
  2. 选择“主题选项”
  3. 在“常规选项卡”下向下滚动到显示“自定义 CSS”的位置
  4. 在右侧的文本框中输入您的 CSS。
  5. 点击“保存更改”
于 2021-07-05T19:01:16.280 回答