css - 为 Wordpress 的按钮菜单 CSS 加下划线

Question

所以我看到了我非常喜欢的这个按钮设计https://codepen.io/lukemeyrick/pen/apZOWm

 $thick : 3px;
$pad : 0.7em;
$extra : calc(#{$pad} * 1.2);
$color : #f26522;

body {
  background: #2d2d2d;
}

a {
  position: fixed;
  cursor: pointer;
  top: 50vh;
  left: 50%;
  color: white;
  transform: translate3d(-50%,-50%,0);
  padding: $pad $extra;
  display: inline-block;
  border: $thick solid transparent;
  position: relative;
  font-size: 1.5em;
  letter-spacing: 0.07em;

  .text {
    // padding: 0 0.3em;
    font-family: proxima-nova;
    transform: translate3d(0,$pad,0);
    display: block;
    transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s;
  }

  &:after {
    position: absolute;
    content: '';
    bottom: -$thick;
    left: $extra;
    right: $extra;
    height: $thick;
    background: $color;
    z-index: -1;
    transition: 
      transform 0.8s cubic-bezier(1,0,.37,1) 0.2s,
      right 0.2s cubic-bezier(.04,.48,0,1) 0.6s,
      left 0.4s cubic-bezier(.04,.48,0,1) 0.6s;
    transform-origin: left;
  }

}

.line {
  position: absolute;
  background: $color;

  &.-right,
  &.-left {
    width: $thick;
    bottom: -$thick;
    top: -$thick;
    transform: scale3d(1,0,1);
  }  

  &.-top,
  &.-bottom {
    height: $thick;
    left: -$thick;
    right: -$thick;
    transform: scale3d(0,1,1);
  }

  &.-right {
    right: -$thick;
    transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s;
    transform-origin: top;
  }

  &.-top {
    top: -$thick;
    transition: transform 0.08s linear 0.43s;
    transform-origin: left;
  }

  &.-left {
    left: -$thick;
    transition: transform 0.08s linear 0.51s;
    transform-origin: bottom;
  }

  &.-bottom {
    bottom: -$thick;
    transition: transform 0.3s cubic-bezier(1,0,.65,1.01);
    transform-origin: right;
  }  
}

a:hover,
a:active {

  .text {
    transform: translate3d(0,0,0);
    transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s;
  }

  &:after {
    transform: scale3d(0,1,1);
    right: -$thick;
    left: -$thick;
    transform-origin: right;
    transition: 
      transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s,
      right 0.2s cubic-bezier(1,0,.65,1.01),
      left 0s 0.3s;
  }

  .line {
    transform: scale3d(1,1,1);

    &.-right {
      transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s;
      transform-origin: bottom;
    }

    &.-top {
      transition: transform 0.08s linear 0.4s;
      transform-origin: right;
    }

    &.-left {
      transition: transform 0.08s linear 0.48s;
      transform-origin: top;
    }

    &.-bottom {
      transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s;
      transform-origin: left;
    }
  }

}

并想在我的 WordPress 网站 http://hcldesign.co.uk/ 上使用它而不是当前的主导航菜单。

现在这是 SCSS，我不知道是否以及如何在我的网站上使用它。

1. 是否可以将此按钮添加到我的导航菜单中，我该怎么做？
2. 是否可以将 SCSS 转换为 CSS？或者在 WordPress 中使用 SCSS。

谢谢，

哈维

Answer 1

1. 是的，当然，这应该是可能的，我不明白为什么不
2. 如果您想快速转换它，您可以使用如下工具:

SCSS to CSS