下划线到 Wordpress 的按钮菜单 CSS答案

【问题标题】：Underline to Button Menu CSS for Wordpress下划线到 Wordpress 的按钮菜单 CSS
【发布时间】：2017-08-03 15:13:27
【问题描述】：

所以我看到这个按钮设计我很喜欢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，我不知道是否以及如何在我的网站上使用它。

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

谢谢，

哈维

【问题讨论】：

是的，您可以将 SCSS 转换为 CSS。你可以在这里sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html阅读更多关于 SCSS 的信息。您可以在codepen中获取编译后的css，只需单击CSS部分的右箭头，然后选择查看编译的CSS。
好的，所以在 codepen 上的代码中，它也有带有样式的 HTML。这些显然与我的 wordpress 主题上的内容不同，关于如何使用我的主题或在哪里以及如何添加样式有任何想法吗？
如果你想遵循 codepen 中的内容，你需要在菜单的每个锚标记中添加 span 元素，检查这个链接 wordpress.stackexchange.com/questions/216286/… 然后你可以在你的样式中添加 CSS。 css。先试试吧。
我不擅长后端代码。我需要从这里更改什么代码？ wordpress.stackexchange.com/questions/216286/…。此处需要更改哪些部分（我在哪里引用要创建的 HTML 类）

标签： css wordpress menu sass nav

【解决方案1】：

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

SCSS to CSS

【讨论】：